$("img").mouseenter(function(){
$(this).addClass("move");
});
情况如下:当您悬停img
时,会向其添加.move
类(即悬停时变为img.move
)。这可能会让人难以解释,但问题是我只有在.move
尚未在页面加载中悬停时才需要添加img
类。
为了说明这一点,我们假设我的网站上有一个徽标img
,该徽标出现在每个页面的同一位置。
如果用户悬停徽标,则会向其添加.move
类(使用css“移动”徽标)现在用户点击加载主页的徽标,但是如果他们的鼠标仍然在加载新页面时添加徽标,添加.move
类,使徽标再次移动。如果在页面加载时鼠标已经在徽标上,我不希望徽标“移动”。如果他们将徽标悬停在页面上的其他位置,它应该只能“移动”。
我需要这个:
(页面加载)> (鼠标不会悬停在
img
)> (然后如果鼠标悬停img
)> (将.move
课程添加到img
)
但要摆脱这个:
(页面加载)> (鼠标已在
上img
)上悬停>的 !!!(加.move
课程img
)!!! < - 如果鼠标是,请不要添加.move
已经在img
使用jQuery执行此操作的最佳方法是什么?
答案 0 :(得分:2)
这是一个小提琴,它可以防止将悬停类添加到元素中,和确保在用户将鼠标从元素移开并再次移回之前不会添加它。它可以简化一些,但它证明了这个概念。
通过悬停文本进行测试,然后按CTRL + Enter运行示例。
$(document).ready(function() {
$(window).one("mousemove", function() {
$(".anch").hover(function() { $(this).hasClass("prevent") ? 0 : $(this).addClass("over");},
function() { $(this).removeClass("over") });
if ($(".anch").is(":hover")) {
$(".anch").addClass("prevent")
.removeClass("over")
.one("mouseleave", function() { $(this).removeClass("prevent") });
}
});
});
答案 1 :(得分:0)
这是你要求的吗?
$(window).load(function(){ //when document + images are loaded
if (!$('#yourimage').is(':hover')) {
$('#yourimage').addClass('someclass');
//add class to image if it's not hovered
// on page load
}
});
答案 2 :(得分:0)
您可以使用mousemove()事件代替。这是demo
$("img").mousemove(function(){
$(this).addClass("move");
});