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

Question

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

我正在尝试使用 jquery mouseenter 在第一个 ID 为 one 的图像上触发悬停。

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

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

Answer 1

您可以使用 class 来应用悬停样式（例如使用 opacity）

.image {
  opacity: .5;
}

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

然后将其添加到您的超时中（并确保在真正的悬停时清理 class）

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);
});

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

JQuery trigger hover won't work with :not(:hover)

javascript

jquery

css

jquery-hover

mouseenter