我有一个图像缩略图，我希望它显示一个隐藏的 div，其中包含相同的图像，但更大，下面有一些描述。只要鼠标悬停在缩略图上，只要鼠标悬停在这个 div 上，它就应该显示隐藏的 div。但出于某种原因，它确实存在故障:图像有时会卡住或无法打开。 这是代码:
$(document).ready(function() {
$(".dropdown").hover(function() {
$(this).children(".dropdown-content").delay(800).show(0);
}, function() {
$(this).children(".dropdown-content").hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<div class="dropdown">
<img src="image.png" width="100" height="50">
<div class="dropdown-content">
<img src="image.png" width="300" height="200">
<div class="desc">Description</div>
</div>
</div>最佳答案
只需在元素上执行操作之前添加 .stop() 即可。
$(document).ready(function() {
$(".dropdown").hover(function() {
$(this).children(".dropdown-content").stop().delay(800).show(0);
}, function() {
$(this).children(".dropdown-content").stop().hide();
});
});
它是如何工作的:当你弄乱它时，它会记录你触发了多少次，然后将其设置为动画那么多次......或者类似的东西..那么 .stop() 做的是确保当你弄乱它时，它首先停止所有以前的动画并做一个新的..所以如果你愿意的话，它会删除它的内存。
关于javascript - 在缩略图悬停时显示图像下拉列表，悬停时隐藏它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49540495/