在悬停时显示项目，在 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

有必要吗？我使用事件 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 2

您应该使用 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 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);
});

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

Revealing items on hover, hide them after X seconds

javascript

css

jquery

timeout