Changing visibility of
elements on hover

Question

I have a navbar ul with icons and another ul aligned in a fixed position to appear next to it with a label for each icon. When the user hovers over a li in the navbar, I want the corresponding li in the second ul to become visible, then become hidden again when the cursor leaves.

I have tried CSS solutions using :hover and jQuery ones using .show() and .hide(), but for some reason it isn't happening.

HTML:

<ul id="vnav">
   <li id="vis"><a class="vnavlink" href="#1"><span class="glyphicon glyph2 glyphicon-eye-open"  aria-hidden="true" aria-label="Vision"></span></a></li>
   <li id="val"><a class="vnavlink" href="#2"><span class="glyphicon glyph2 glyphicon-ok"  aria-hidden="true" aria-label="2"></span></a></li>
   <li id="foo"><a class="vnavlink" href="#3"><span class="glyphicon glyph2 glyphicon-ok" aria-hidden="true" aria-label="3"></span></a></li>
   <li id="dri"><a class="vnavlink" href="#4"><span class="glyphicon glyph2 glyphicon-ok" aria-hidden="true" aria-label="4"></span></a></li>
   <li id="eng"><a class="vnavlink" href="#5"><span class="glyphicon glyph2 glyphicon-ok"  aria-hidden="true" aria-label="5"></span></a></li>
</ul>

<ul>
   <li class="vbox" id="visbox">Vision</li>
   <li class="vbox" id="valbox">v2</li>
   <li class="vbox" id="foobox">v3</li>
   <li class="vbox" id="dribox">v4</li>
   <li class="vbox" id="engbox">v5</li>
</ul>

CSS:

#vnav {
list-style-type: none; 
text-decoration: none; 
position:fixed;
left:0;
top:350px;
z-index:1;
}

#visbox {
left:95px;
top:368px;
}

.vbox {
position:fixed;
z-index:1;
height:40px;
width:120px;
visibility:hidden;
}

#vnav:hover + #vbox {
visibility:visible;
}

Alternatively, here is one of my attempts at using jQuery for it:

$(document).ready(function() { 
  $('#visbox').hide();
});

(NB. I also tried setting the default in the CSS as visibility:hidden or display:hidden)

$('#vis').hover(function(){
  $('#visbox').show();},
  function(){
  $('#visbox').hide();
});

I've tried to hack a fiddle together based on what you've given us: http://jsfiddle.net/axuj6089/ we obviously need more css. Two problems with your CSS attempt: `+` is the sibling selector and `vbox` is not a sibling of `#vnav`. Further more `vbox` is a class not an ID. Also try using `display:none` instead of `visability:hidden` and `display:block` instead of `visibility:visible;`. See this SO question for the differences: http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — Jon P, Mar 10 '15 at 02:43
Thanks Jon - I did put vbox as a class when I tried it; I just typed it out wrong here. I managed to get the same result as you have achieved here before with css, but what I want is for each icon (i.e. each

Jey DWork · Accepted Answer · 2015-03-10T12:09:33.540

If I understand correctly (now ;-)) what you want to do (basicly show an label on mouseover) you are really trying it complicated.

I'd try not to fight with two <ul>s next to each other (which can get even more messy when you also would like to make everything responsive for example) but add the Icons to the main <ul> and only show them on :hover. That could look like something like this:

HTML:

 <ul>
   <li class="vbox" id="visbox"><span class="glyphicon glyph2 glyphicon-eye-open"></span> <span class="text-label">Vision</span></li>
   <li class="vbox" id="valbox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-label">v2</span></li>
    <li class="vbox" id="foobox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-label">v3</span></li>
   <li class="vbox" id="dribox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-label">v4</span></li>
   <li class="vbox" id="engbox"><span class="glyphicon glyph2 glyphicon-ok"></span> <span class="text-label">v5</span></li>
</ul>

CSS:

.vbox{
    list-style: none;
}
.vbox .text-label {
    visibility: hidden;
}
.vbox:hover {
    cursor: pointer;
}
.vbox:hover .text-label {
    visibility: visible;
}

You can check out the behavior in this fiddle: http://jsfiddle.net/Lmonnj5n/1/ (and here is the old fiddle where the icons were hidden: http://jsfiddle.net/Lmonnj5n/)
If this it what you wanted you need to adjust the position to your case because I stripped any positioning which is relevant to your specifc case.

EDIT
The icon now is always visible and what gets shown/hidden on mouseover/mouseout is the label.

Thanks for your answer, Jey. Unfortunately I was not looking to show the icon on mouseover, but rather to have the icons all visible but the second
containing the labels invisible, then when the user hovers over any particular icon, the corresponding label becomes visible (i.e. the corresponding
from the second
). — geoman, Mar 10 '15 at 11:17
Okay, so when I understand you correctly now, it's just the other way around than before. You could use the same approach then and just give the text labels a class which you hide per default and show on `.vbox:hover`. I've updated my answer and my fiddle. See if that fits your needs. — Jey DWork, Mar 10 '15 at 12:11
That does the trick. I had actually just come up with a workaround where the second
becomes a series of children of the first
's
s and then the css visibility can be applied to the child
s. Your solution is much simpler and more elegant though, thanks. — geoman, Mar 10 '15 at 12:20

score 0 · Answer 2 · answered Mar 10 '15 at 02:38

try this

 $('#vnav .vnavlink').mouseover(function(e){
    e.preventDefault();
    var parent =  $(this).attr('id');
    $(".vbox").hide();
    $("#"+parent+"box").show();
}).mouseout(function(e){
    e.preventDefault();
    var parent =  $(this).attr('id');
    $("#"+parent+"box").hide();
})

Changing visibility of elements on hover

2 Answers2

Changing visibility of
elements on hover