javascript - 使元素上的悬停效果仅持​​续有限的时间

Question

在我的笔中:http://codepen.io/explicit_concept/pen/BLgoVG有脚本仅在整个 .device div 的第一次悬停时触发 .icon 元素的比例/背景颜色变化。例如，如何使悬停时触发的效果仅持续 3 秒？

我已经看到它是由 doTimeout jQuery 插件完成的，但为了学习，我想从头开始制作它。

是否应该在悬停时使用 setTimeout 来完成，这会向元素添加类，然后在计时器完成后撤消 .addClass ？

这是悬停的 jQuery 代码:

$(document).ready(function () {
$('.device').one('mouseenter',function() {
  $(this).find('.icon').addClass('icon-hovered');
    });
$('.device').mouseleave(function() {
  $('.icon').removeClass('icon-hovered');
    });

Answer 1

setTimeout(() => {
    $(this).find(".icon").removeClass("icon-hovered")
}, 3000); // time in milliseconds

在你的 mouseenter 监听器将工作。