Question

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

我尝试过使用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

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

我尽量不与彼此相邻的两个<ul>进行战斗（例如，如果你想让所有东西都响应，可能会变得更加混乱）但是将图标添加到主<ul> 1}}并且仅在: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;
}

你可以查看这个小提琴中的行为：http://jsfiddle.net/Lmonnj5n/1/（这里是隐藏图标的旧小提琴：http://jsfiddle.net/Lmonnj5n/）
如果这就是你想要的你需要的调整位置到您的情况，因为我剥离了与您的具体情况相关的任何定位。

修改
现在，图标始终可见，鼠标悬停/鼠标移动时显示/隐藏的内容是标签。

Answer 2

试试这个

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

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

2 个答案: