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

我正在尝试实现一种“显示”效果，在悬停时显示网格中的项目。 在这里一切都很好，但一旦显示出来，我想让它们在X秒后再次消失——所以这并不是说当你从项目上移动鼠标时，它们会立即消失

这就是我到目前为止所尝试的，但在我将鼠标从项目中移出后，项目不会返回到其“未显示”状态

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

有人知道怎么解决吗？

---

提前谢谢。

有必要吗？我使用事件

mouseover

而不是

悬停

，因为当鼠标移动时，

悬停

总是会触发，即使您尝试将光标移离对象

$（“.home box”）.mouseover（函数（）{
$（'img'）.css（“不透明度”，1）；
setTimeout（函数（）{
$（'img'）.css（“不透明度”，0）；
}, 2000);
});

.home框{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：300px；
高度：300px；
边框：1px纯绿色；
位置：相对位置；
}
img{
不透明度：0；
位置：绝对位置；
身高：100%；
}

请让我停下来等待。。。

有必要吗？我使用事件

mouseover

而不是

悬停

，因为当鼠标移动时，

悬停

总是会触发，即使您尝试将光标移离对象

$（“.home box”）.mouseover（函数（）{
$（'img'）.css（“不透明度”，1）；
setTimeout（函数（）{
$（'img'）.css（“不透明度”，0）；
}, 2000);
});

.home框{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：300px；
高度：300px；
边框：1px纯绿色；
位置：相对位置；
}
img{
不透明度：0；
位置：绝对位置；
身高：100%；
}

请让我停下来等待。。。

您应该使用

mouseenter

和

mouseleave

事件，并在每个事件中添加单独的功能。 传递给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);
});

---

您应该使用

mouseenter

和

mouseleave

事件，并在每个事件中添加单独的功能。 传递给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);
});

---

问题在于

此

在setTimeout中具有不同的含义-您可以存储

框

（

此

）并重新使用它

var超时；
$（“.home box”）.hover（函数（）{
clearTimeout（超时）；
$（this.css（“不透明度”，1）；
}，函数（）{
var-box=这个；
timeout=setTimeout（函数（）{
$（框）.css（“不透明度”，0）；
}, 500);
});问题在于
此
在setTimeout中具有不同的含义-您可以存储
框
（
此
）并重新使用它


var超时；
$（“.home box”）.hover（函数（）{
clearTimeout（超时）；
$（this.css（“不透明度”，1）；
}，函数（）{
var-box=这个；
timeout=setTimeout（函数（）{
$（框）.css（“不透明度”，0）；
}, 500);
});
.hover（）
只是
mouseenter
/
mouseleave
的简写，因此无需更改这些选项。但是，您应该使代码尽可能可读和明确。因此，我个人会选择一个单独的函数定义。工作完美！我需要删除clearTimeout（超时）；虽然为了得到想要的效果。谢谢基本上，
clearTimeout
将确保如果鼠标再次回到元素上，则不会执行调用堆栈中
mouseleave
中先前的淡入淡出操作。@mappie你说得对！刚刚做到：）再次感谢
.hover（）
只是
mouseenter
/
mouseleave
的简写形式，因此无需更改这些选项。但是，您应该使代码尽可能可读和明确。因此，我个人会选择一个单独的函数定义。工作完美！我需要删除clearTimeout（超时）；虽然为了得到想要的效果。谢谢基本上，
clearTimeout
将确保如果鼠标再次回到元素上，则不会执行调用堆栈中
mouseleave
中先前的淡入淡出操作。@mappie你说得对！刚刚做到：）再次感谢！事实证明，这是必要的。。我对作者的问题理解有点不正确，而且做得不一样。很好的解决方案！起初，我给了你一个加号，但我不知道是谁给了你一个减号。谢谢，我的大多数答案似乎都是立即得到的-1，不管内容如何，认为有人对我有兴趣，但看不出是谁在想“哦，那只是x，不用担心”同样的情况最近也触动了我：（事实证明，这是必要的。）我对作者的问题理解有点错误，并且做了不同的处理。很好的解决方案！最初，我给了你一个加号，但我不知道谁加了减号。谢谢，我的大多数答案似乎都是立即得到的-1，不管内容如何，我想有人给了我这个答案，但看不出是谁给了我k“哦，那只是x，不用担心”同样的情况最近也触动了我：(