如何在李上显示隐藏的div:悬停？

Question

我有一个显示mysql查询结果的php页面.此结果显示在无序列表中<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();
});