我有两个 div，一个用于简短摘要，一个用于长摘要。
当我将鼠标悬停在简短摘要上时，简短摘要消失并出现长摘要。
当我从长摘要中“鼠标移开”时，它应该消失，而简短摘要应该出现。
问题是，当我仍在长摘要的边界内但不在排序摘要的位置时，会发生 mouseout 事件
代码:
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script>
<script>
function show(Fdiv) {
$(Fdiv).css("display", "none");
$(Fdiv).next().css("display", "inline");
}
function hide(Sdiv) {
$(Sdiv).css("display", "none");
$(Sdiv).prev().css("display", "inline");
}
</script>
</head>
<body>
<div onmouseover="show(this)"> Sort summary <br /> Second Row</div>
<div onmouseout="hide(this)" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>
</body>
</html>
最佳答案
您可以使用 CSS 来完成此操作，而不是使用 JavaScript。这具有性能以及语义和逻辑优势。
不过您必须稍微更改一下 HTML 结构。我假设这些摘要是针对书籍的。
HTML
<div class="book">
<p class="short">Short summary.</p>
<p class="long">Long summary.</p>
</div>
CSS
.book .long,
.book:hover .short { display:none }
.book:hover .long { display:block }
关于jquery - 鼠标移开时隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13007550/