Changing visibility of <li> 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();
});

Answer 1

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.

Answer 2

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();
})