JQuery 触发悬停不适用于 :not(:hover)
JQuery trigger hover won't work with :not(:hover)
我有一个案例与这个非常相似:https://codepen.io/ianfarb/pen/EJunm
我正在尝试使用 jquery mouseenter 在第一个 ID 为 one 的图像上触发悬停。
window.setTimeout(function () {
$('#one').trigger('mouseenter');
}, 2500)
然而,这似乎不起作用,无论是在我的代码中还是在上面 link 中的代码中,因为 :not(:hover) 样式似乎总是适用。我也尝试过使用 $().offset() 来触发重绘,但这也不起作用。
您可以使用 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);
});
我有一个案例与这个非常相似:https://codepen.io/ianfarb/pen/EJunm
我正在尝试使用 jquery mouseenter 在第一个 ID 为 one 的图像上触发悬停。
window.setTimeout(function () {
$('#one').trigger('mouseenter');
}, 2500)
然而,这似乎不起作用,无论是在我的代码中还是在上面 link 中的代码中,因为 :not(:hover) 样式似乎总是适用。我也尝试过使用 $().offset() 来触发重绘,但这也不起作用。
您可以使用 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);
});