悬停时显示项目，X秒后隐藏

Question

我正在努力完成一个"显示"；悬停时显示网格中项目的效果。这里一切都很好，但一旦透露，我想让它们在X秒后再次消失——所以当你把鼠标从项目上移开时，它们不会立即消失。

这就是我到目前为止所尝试的，但这些物品不会回到它们的"；未公开的"；将鼠标从项目中移开后的状态。

var timeout;
$(".home-box").hover(function () {
clearTimeout(timeout);
$(this).css("opacity", 1);
}, function () {
timeout = setTimeout(function(){
$(this).css("opacity", 0);
},500);
});

有人知道怎么解决吗？提前谢谢。

Answer 1

您应该使用mouseenter和mouseleave事件，并在每个事件中添加单独的功能。对this的引用可能在传递给setTimeout的回调函数中丢失。

$(".home-box").mouseenter(function() {
clearTimeout(timeout);
$(this).css("opacity", 1);
});
$(".home-box").mouseleave(function() {
var $element = $(this)
timeout = setTimeout(function(){
$element.css("opacity", 0);
},500);
});

Answer 2

有必要吗？我使用了事件mouseover而不是hover，因为当鼠标移动时，即使您试图将光标从对象移开，hover也会始终激发。

$(".home-box").mouseover(function () {
$('img').css("opacity", 1);
setTimeout(function(){
$('img').css("opacity", 0);
}, 2000);
});

.home-box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
}
img {
opacity: 0;
position: absolute;
height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home-box">
hover me pls and wait...
<img src="https://im0-tub-ru.yandex.net/i?id=1a59e5c138260403e2230f0d2b264513&n=13">
</div>

Answer 3

问题是this在setTimeout中有不同的含义-您可以存储box(this(并重用它。

var timeout;
$(".home-box").hover(function() {
clearTimeout(timeout);
$(this).css("opacity", 1);
}, function() {
var box = this;
timeout = setTimeout(function() {
$(box).css("opacity", 0);
}, 500);
});