下面是我的问题的代码。我有一个 list ，当我将鼠标悬停在“取出垃圾”上时，鼠标悬停事件起作用。然而，每次我将鼠标悬停在“取出任务”上时它都会重复
我想要的是让一个人将鼠标悬停在“取出垃圾”上并出现鼠标悬停事件，但是当我使用 mouseleave 让它再次消失时，而不是每次我将鼠标悬停在它上面时都重复。该消息应该只出现一次
<li class="ui-state-default">
<div class="checkbox">
<label>
<img src="img/edit.png" id="edit" alt="edit list">
<div id="outer">
<input type="checkbox" class="checkbox1" value="" />Take out the trash
</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<div id="list2">
<img src="img/edit.png" id="edit" alt="edit list">
<input type="checkbox" value="" />Buy bread</label>
<div id="hidden1">
Buy milk
</div>
</div>
</div>
</li>
$( "#outer" ).mouseover(function() {
$( "#hidden" ).show();
});
$("#outer").mouseleave(function(){
$( "#hidden" ).hide();
});
$( "list2" ).mouseover(function() {
$( "#hidden1" ).show();
});
$("#list2").mouseleave(function(){
$( "#hidden1" ).hide();
});
最佳答案
试试这个:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hover Text</title>
<style>
.hidden-div {
display: none;
}
.checkbox:hover .hidden-div {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="ui-state-default">
<div class="checkbox">
<label>
<img src="img/edit.png" id="edit" alt="edit list">
<input type="checkbox" class="checkbox1" value="" />Take out the trash
<div class="hidden-div">This is the notes for this item</div>
</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<img src="img/edit.png" id="edit" alt="edit list">
<input type="checkbox" class="checkbox1" value="" />Make your Bed
<div class="hidden-div">Fluff your pillow too.</div>
</label>
</div>
</li>
</ul>
</ul>
</body>
</html>
这仅使用 CSS 来隐藏和显示 hidden-div。
关于javascript - 使用 mouseover() 时如何只允许出现一条消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47488890/