我正在尝试创建一个细节 block ,如果该元素具有类“hasDetails”,则只有当光标位于列表的元素上时才会显示该 block 。我尝试使用“mouseover”和“mouseenter”,但均无效。我不明白为什么这不起作用。谁能帮忙?
JQUERY
$(document).ready(function() {
$('#list').find('.listItem').mouseover(function(){
if($(this).hasClass('hasDetails')) {
$('#details').css("display", "table");
};
});
});
HTML
<div id="details">
<p>Details</p>
</div>
<ul id="list">
<li class="listItem hasDetails">
<p>ITEM</p>
</li>
<li class="listItem">
<p>ITEM</p>
</li>
<li class="listItem hasDetails">
<p>ITEM</p>
</li>
<li class="listItem">
<p>ITEM</p>
</li>
<li class="listItem">
<p>ITEM</p>
</li>
</ul>
CSS
.details{
display: none;
}
最佳答案
$(document).ready(function() {
$('#list').find('.listItem').mouseover(function(){
if($(this).hasClass('hasDetails')) {
$('#details').show();
};
});
});
关于jquery - 当鼠标悬停在确定类别的元素上时显示详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41706289/