如何在 li:hover 上显示隐藏的 div？答案

【问题标题】：how to show hidden div on li:hover?如何在 li:hover 上显示隐藏的 div？
【发布时间】：2011-11-01 13:48:29
【问题描述】：

我有一个显示来自 mysql 的查询结果的 php 页面。此结果显示在无序列表<li> 中。我还有一个 div，最初隐藏在每个 <li> 标签内，应该在悬停时显示。我已经使用 jquery 尝试过这个：

$('#results li').mouseover(function() { 
   $('.theoption').show();
}).mouseleave(function() {$('.theoption').hide()});

这会显示隐藏的 div。问题是它同时显示在所有<li> 标签上。如何更改代码以使 div 仅显示在当前悬停的 <li> 上？

非常感谢。

【问题讨论】：

是li标签里面的div吗？
请给我们看一些生成的标记，细节很重要，从你的描述中看不清楚。

标签： jquery hover

【解决方案1】：

如果 div 在 inside li 标签中，您可以使用普通的 ol' css：

#results li:hover div.theoption {
     display: block;
}

或者在 jQuery 中：

$('#results li').hover(function(){
     $('.theoption', this).show();  //find the div INSIDE this li
},function(){
     $('.theoption', this).hide();
});

【讨论】：

如果您的 div 尚未在 LI 中，它们可能应该在。然后尼尔的解决方案将起作用。要理解的重要一点是双参数选择器。第一个是目标，但在逗号之后是上下文。根据注释代码，“在这个悬停元素（LI）中找到 .theoption。
@SaintShann 如果此解决方案有效，您在提问时应该更加准确！
抱歉@Teneff 缺少详细信息。下次我会尽量彻底。谢谢。

【解决方案2】：

$('#results li').mouseover(function() { 
    $(this).find('.theoption').show();
}).mouseout(function() {
    $(this).find('.theoption').hide();
});

【讨论】：

【解决方案3】：

如果 <div> 在 <li> 旁边，您也可以使用纯 CSS：

#results li:hover + div.theoption {
    display: block;
}

CSS 2 - Partern Matching

如果你坚持使用 jQuery，那就可以做到：

$('#results li').hover(function(){
    $(this).next().show();
}, function(){
    $(this).next().hide();
});

【讨论】：