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

【问题标题】：Changing visibility of <li> elements on hover更改悬停时 <li> 元素的可见性
【发布时间】：2015-03-10 02:28:44
【问题描述】：

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

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

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

【问题讨论】：

我已经尝试根据您给我们的内容拼凑出一个小提琴：jsfiddle.net/axuj6089 我们显然需要更多的 CSS。您的 CSS 尝试存在两个问题：+ 是同级选择器，vbox 不是 #vnav 的同级。此外，vbox 是一个类而不是一个 ID。还可以尝试使用display:none 代替visability:hidden 和display:block 代替visibility:visible;。有关差异，请参阅此 SO 问题：stackoverflow.com/questions/133051/…
感谢 Jon - 我在尝试时确实将 vbox 作为一个类；我只是在这里打错了。我设法获得了与您之前使用 css 获得的结果相同的结果，但我想要的是每个图标（即每个
）只使一个标签可见（即第二个
- )，而不是整个

【解决方案1】：

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

我会尽量不要与两个相邻的 <ul>s 打架（例如，当您还想让所有内容都响应时，这可能会变得更加混乱）但将图标添加到主要的 <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;
}

您可以查看此小提琴中的行为：http://jsfiddle.net/Lmonnj5n/1/（这是隐藏图标的旧小提琴：http://jsfiddle.net/Lmonnj5n/）
如果这是您想要的，则需要将位置调整为案例，因为我剥离了与您的特定案例相关的任何定位。

编辑
该图标现在始终可见，而在 mouseover/mouseout 上显示/隐藏的是标签。

【讨论】：

感谢您的回答，杰伊。不幸的是，我并不想在鼠标悬停时显示图标，而是让图标全部可见，但第二个
- 来自第二个
  )。
好的，所以当我现在正确理解你时，它只是与以前相反。然后您可以使用相同的方法，只需给文本标签一个您默认隐藏并显示在.vbox:hover 上的类。我已经更新了我的答案和我的小提琴。看看这是否符合您的需求。
这样就行了。实际上，我刚刚想出了一个解决方法，其中第二个

【解决方案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();
})

【讨论】：