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

【问题标题】：JQuery trigger hover won't work with :not(:hover)JQuery 触发器悬停不适用于 :not(:hover)
【发布时间】：2016-07-11 15:48:01
【问题描述】：

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

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

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

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

【问题讨论】：

可能不相关，但#1 是 CSS 中的无效 ID
通常以数字开头的id 可能会出现问题。
jQuery 的 trigger() 触发事件处理程序，而不是样式。
我的意思是jQuery的trigger()会触发一个用javascript绑定的事件，如果不会触发用CSS设置的样式。
好的，请发布答案，以便我检查并标记为已接受。

标签： javascript jquery css jquery-hover mouseenter

【解决方案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);
});

【讨论】：

这正是我想要的