悬停时更改 <li> 元素的可见性

Question

我有一个带图标的导航栏 ul 和另一个 ul 在固定位置对齐显示在它旁边，每个图标都有一个标签。当用户将鼠标悬停在导航栏中的 li 上时，我希望第二个 ul 中相应的 li 变得可见，然后在光标离开时再次隐藏。

我已经尝试 CSS 使用 :hover 的解决方案和 jQuery 使用 .show() 和 .hide() 的解决方案，但由于某些原因它没有发生。

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

或者，这是我使用 jQuery 的尝试之一：

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

（注意。我还尝试将 CSS 中的默认值设置为 visibility:hidden 或 display:hidden）

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

Answer 1

试试这个

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

Answer 2

如果我理解正确（现在 ;-)）你想做什么（基本上是在鼠标悬停时显示标签）你真的在尝试复杂化。

我尽量不要让两个 <ul> 彼此相邻（例如，当您还想让所有内容都响应时，这可能会变得更加混乱）但将图标添加到主<ul> 并且只在 :hover 上显示它们。这可能看起来像这样：

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

您可以查看此 fiddle 中的行为：http://jsfiddle.net/Lmonnj5n/1/ (and here is the old fiddle where the icons were hidden: http://jsfiddle.net/Lmonnj5n/)
如果这是您想要的，您需要根据您的情况调整位置，因为我删除了任何定位这与您的具体情况有关。

编辑
该图标现在始终可见，mouseover/mouseout 上的 shown/hidden 是标签。

悬停时更改 <li> 元素的可见性

Changing visibility of <li> elements on hover

css

jquery

visibility

show-hide