www.webdeveloper.com
Results 1 to 6 of 6

Thread: Prev/Next buttons on hover

  1. #1
    Join Date
    Sep 2006
    Posts
    79

    Prev/Next buttons on hover

    Hi,

    My client wants the prev/next buttons hidden except on hover like this: http://woodensun.com (slideshow on homepage).

    On the new site, http://wp.woodensun.com, they're visible all the time. I tried this:

    Code:

    Code:
    .nivo-directionNav a {
        background-color: #222222;
        cursor: pointer;
        margin: 5px;
        opacity: 0.9;
        padding: 5px 10px;
        position: absolute;
        top: 42%;
        z-index: 9;
        color:#fff
    }
    
    .nivo-prevNav {
    	display:none;
    }
    
    .nivo-nextNav {
    	display:none;
    }
    
    .nivo-prevNav a:hover {
    	left:0px;
    	display:block;
    }
    .nivo-nextNav a:hover {
    	right:0px;
    	display:block;
    }
    (and a couple of other variations) but that doesn't work. Can anyone straighten me out here?

    Thank you,

    John

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    You can't use "display:none" for this purpose because that setting would prevent a 'hover' event from ever occurring on the element. You'll have to use "visibility:hidden".

  3. #3
    Join Date
    Sep 2006
    Posts
    79
    Rick,

    I changed it to:

    Code:
    .nivo-directionNav a {
        background-color: #222222;
        cursor: pointer;
        margin: 5px;
        opacity: 0.9;
        padding: 5px 10px;
        position: absolute;
        top: 42%;
        z-index: 9;
        color:#fff
    }
    
    .nivo-prevNav {
    	visibility:hidden;
    }
    
    .nivo-nextNav {
    	visibility:hidden;
    }
    
    .nivo-prevNav a:hover {
    	left:0px;
    	visibility:visible;
    }
    .nivo-nextNav a:hover {
    	right:0px;
    	visibility:visible;
    }
    Same result as display:none. There's something about the .nivo-directionNav a and the .nivo-prevNav/.nivo-nextNav relationship that I don't have correct. - ??

  4. #4
    Join Date
    Sep 2013
    Posts
    17
    Well, in the first link you gave, you're not actually hovering over the divs that hold the buttons to make the buttons appear.
    You're actually hovering anywhere over the entire div that holds your slideshow.
    It's actually a mute point because of this, but what rtrethewey said about display:none, I'm pretty sure also holds true for visibility:hidden.
    You can't fire an event by hovering over something that's either not displayed or not visible. Can't do it.
    But, you can do something like this:

    .slideshow_holder {
    z-index:2;
    }

    .slideshow_holder a:hover
    z-index:-1;
    }

    The .slideshow_holder div hides (covers) the .nivos when you're not hovering over it by having a z-index of 2,
    and then 'scoots' below the .nivos when you do hover it by having a z-index of -1

    Work with it, I'm pretty sure it can be done this way
    You might be right in that once the .nivos DO show, you may have to additionally
    have to have an a:hover on them to keep them showing (and therefore clickable) when you hover over them.
    I thinking you might loose your focus on the .slideshow_holder when your mouse crosses over onto one of the .nivos

  5. #5
    Join Date
    Sep 2013
    Posts
    1
    i play the violin. i want to play two or three parts and merge them together into one single part. how can i do this?

  6. #6
    Join Date
    Sep 2013
    Posts
    221
    You could use some CSS for that. I don't know the exact elements without some sample code, but the essence is this :

    <div class="parent">
    <div> <!--STUFF--></div>
    <div class="navigation-links"><!--LINKS--></div>
    </div>
    for the above simplistic markup, just use the following CSS:

    .parent .navigation-links { display:none; }
    .parent:hover .navigation-links { display:block; }
    and you should have the desired effect.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles