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标签你可以使用普通的'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();
});

Answer 2

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

Answer 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();
});

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

3 个答案: