javascript - JQuery 触发器悬停不适用于 :not(:hover)

Question

我有一个与这个非常相似的案例:https://codepen.io/ianfarb/pen/EJunm

我正在尝试使用 jquery mouseenter 在第一个具有 Id 的图像上触发悬停。

window.setTimeout(function () {
    $('#one').trigger('mouseenter');
}, 2500)

然而，这似乎不起作用，无论是在我的代码中还是在上面链接中的代码中，因为 :not(:hover) 样式似乎总是适用。我也尝试过使用 $().offset() 来触发重绘，但这也不起作用。

Answer 1

您可以使用一个类来应用悬停样式(例如使用opacity)

.image {
  opacity: .5;
}

.image:hover,
.image.is-hover {
  opacity: 1;
}

然后将它添加到你的超时中(并确保在真正的悬停时清理类)

jQuery(function($) {
  function enter() {
    $(this).addClass('is-hover').siblings().removeClass('is-hover');
  }

  function leave() {
    $(this).removeClass('is-hover');
  }

  $('.image').hover(enter, leave);

  setTimeout(function() {
    enter.call($('.image:first-child'));
  }, 2500);
});