Jquery 更改<；李>；悬停元素

我有一个带有图标的导航栏

ul

，另一个

ul

在固定位置对齐，显示在它旁边，每个图标都有一个标签。当用户将鼠标悬停在导航栏中的

li

上时，我希望第二个

ul

中相应的

li

变为可见，然后在光标离开时再次变为隐藏

我曾经尝试过使用hover和jQuery的CSS解决方案，它们分别使用

.show（）

和

.hide（）

，但由于某种原因，它们没有出现

HTML:

视觉
v2
v3
v4
v5

CSS:

#vnav{
列表样式类型：无；
文字装饰：无；
位置：固定；
左：0；
顶部：350px；
z指数：1；
}
#visbox{
左：95px；
顶部：368px；
}
.vbox{
位置：固定；
z指数：1；
高度：40px；
宽度：120px；
可见性：隐藏；
}
#vnav:悬停+#vbox{
能见度：可见；
}

或者，下面是我使用jQuery的一个尝试：

$（文档）.ready（函数（）{
$（“#visbox”）.hide（）；
});         

（注意，我还尝试将CSS中的默认设置为

可见性：隐藏

或

显示：隐藏

）

$（'#vis'）。悬停（函数（）{
$（'#visbox'）.show（）；}，
函数（）{
$（“#visbox”）.hide（）；
});

试试这个

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

如果我理解正确（现在；-）你想做什么（基本上在鼠标上方显示一个标签），你真的在尝试复杂的事情

我尽量不与相邻的两个

发生冲突（例如，当您还想让一切都响应时，这可能会变得更加混乱），而是将图标添加到主

中，并仅在

上显示它们：悬停
。可能看起来像这样：

HTML:

您可以查看此提琴中的行为：（这是隐藏图标的旧提琴：）
如果这是您想要的，您需要根据您的情况调整位置，因为我删除了与特定情况相关的任何位置

编辑

图标现在总是可见的，在mouseover/mouseout上显示/隐藏的是标签。
我试着根据你给我们的东西拼凑出一把小提琴：我们显然需要更多的css。CSS尝试有两个问题：
+
是同级选择器，
vbox
不是
#vnav
的同级。此外，
vbox
是一个类而不是ID。也可以尝试使用
display:none
代替
visability:hidden
和
display:block
代替
visibility:visible。看看这个问题的区别：谢谢Jon，我在尝试vbox时确实把它作为一个类；我只是打错了。我设法获得了与您之前使用css获得的相同的结果，但我想要的是每个图标（即每个
）只显示一个标签（即第二个
中只有一个
），而不是整个
在悬停时显示整个第二个
。谢谢您的回答，Jey。不幸的是，我不是想在鼠标上方显示图标，而是想让所有图标都可见，但第二个
包含不可见标签，然后当用户悬停在任何特定图标上时，相应的标签变为可见（即第二个
对应的
），这和以前完全不同。然后，您可以使用相同的方法，只给文本标签一个类，该类根据默认值隐藏并显示在
。vbox:hover
。我已经更新了我的答案和小提琴。看看这是否符合你的需要。这就行了。实际上，我刚刚想出了一个解决办法，第二个
变成第一个
的
的一系列子级，然后css可见性可以应用到子级
上。不过，您的解决方案更简单、更优雅，谢谢。
 <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>

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