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

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

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

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

非常感谢。

来源

2011-11-01 Saint Dee

是L1标签里面的DIV？ – Neal

请给我们展示一些生成的标记，细节非常重要，并且从描述中不清楚。 – roryf

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

来源

2011-11-01 13:50:27 Neal

这个工程。非常感谢你 –

如果你的div不在LI里面，他们可能应该是。然后尼尔的解决方案将工作。重要的是要理解的是双参数选择器。第一个是目标，但逗号之后是上下文。根据评论代码，“在这个悬停元素（LI）中查找.theoption –

@SaintShann如果这个解决方案可以工作，你应该在提问时更加精确！ – Teneff

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

来源

2011-11-01 13:51:15 Blazemonger

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

来源

2011-11-01 13:54:38 Teneff

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

回答

相关问题