如何在鼠标悬停时显示隐藏的div？

Question

我有一个 PHP 页面，用于显示 MySQL 查询结果。这个结果以无序列表 <li> 的形式显示。在每个 <li> 标签内部还有一个初始隐藏的 div，应该在鼠标悬停时显示出来。我尝试使用以下 jQuery 代码实现：

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

这会显示隐藏的div。问题在于它会同时显示在所有的<li>标签上。我应该如何更改代码，使得div只在当前hover的<li>上显示？

非常感谢。

- Saint Dee

---

<div>标签是否在<li>标签内？ - Naftali

请展示一些生成的标记语言，细节很重要，从您的描述中无法清楚地了解它们。 - roryf

Answer 1

如果 div 在 li 标签内部，则可以使用常规的 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();
});

- Naftali

---

如果你的 div 元素还没有被包含在 LI 元素内，那么它们很可能应该被包含进去。然后 Neal 的解决方案就可以工作了。理解两个参数选择器是非常重要的。第一个是目标，而逗号后面的是上下文。根据代码注释，“在此悬停元素（LI）内查找 .theoption 元素”。 - Greg Pettit

@SaintShann 如果这个解决方案有效，那么你在提问时应该更加精确！ - Teneff

抱歉 @Teneff ，我没有提供足够的细节，下次我会尽可能详尽。谢谢。 - Saint Dee

Answer 2

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

- Blazemonger

Answer 3

如果 <div> 紧挨着 <li>，你也可以使用纯 CSS：

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

CSS 2 - 模式匹配

如果你坚持要使用 jQuery，那么可以这样做：

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

- Teneff