jquery - 如何在li上显示隐藏的div :hover?

Question

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

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

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

非常感谢。

Answer 1

如果 div 位于 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();
});