如何在li上显示隐藏的div:悬停?
我有一个php页面显示来自mysql的查询结果。此结果显示在无序列表<li>
中。我还有一个div,最初隐藏在每个<li>
标记内,应该在悬停时显示。我已经试过这个使用jQuery这个:如何在li上显示隐藏的div:悬停?
$('#results li').mouseover(function() {
$('.theoption').show();
}).mouseleave(function() {$('.theoption').hide()});
这显示隐藏的div。问题是它同时在所有<li>
标签上显示。如何更改代码,以便div仅显示在当前悬停的<li>
上?
非常感谢。
如果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();
});
这个工程。非常感谢你 –
如果你的div不在LI里面,他们可能应该是。然后尼尔的解决方案将工作。重要的是要理解的是双参数选择器。第一个是目标,但逗号之后是上下文。根据评论代码,“在这个悬停元素(LI)中查找.theoption –
@SaintShann如果这个解决方案可以工作,你应该在提问时更加精确! – Teneff
$('#results li').mouseover(function() {
$(this).find('.theoption').show();
}).mouseout(function() {
$(this).find('.theoption').hide();
});
如果<div>
是旁边<li>
您还可以使用纯CSS:
#results li:hover + div.theoption {
display: block;
}
如果你坚持使用jQuery这就是它如何做到:
$('#results li').hover(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
});
是L1标签里面的DIV? – Neal
请给我们展示一些生成的标记,细节非常重要,并且从描述中不清楚。 – roryf