jQuery 在开始触发器之前检查悬停状态
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6035137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery check hover status before start trigger
提问by jojo
i create a small slider plugin with jquery. the images would slide 5% in from left or right when the mouse is over the left or right controll div. On click the image slides in to 100%
我用 jquery 创建了一个小滑块插件。当鼠标悬停在左侧或右侧控制 div 上时,图像将从左侧或右侧滑动 5%。单击图像滑动到 100%
the problem is that when move the mouse during the full slide in animation from the left to right control div i coudnt check if the mouse is always over the left div to trigger the mouseover event again. the result is that the image from the left and the from the right is show 5%.
问题是,在动画从左到右控制 div 的完整幻灯片期间移动鼠标时,我无法检查鼠标是否始终位于左 div 上以再次触发鼠标悬停事件。结果是左侧和右侧的图像显示 5%。
Is there a way to check the mouseover like this one?
有没有办法像这样检查鼠标悬停?
if($(this).mouseover())
$(".right").trigger("mouseover");
the code of a controller div look like this
控制器 div 的代码如下所示
$(".right",this).bind({
mouseover:function(){
if( vars.current == $("img").length-1 || vars.running) return false;
$("img:eq("+(vars.current+1)+")").removeAttr("style").css({position:"absolute",left:"100%","z-index":vars.current+1}).show().animate({left:"95%"}, {queue: false})
},
mouseleave:function(){
if( vars.current == $("img").length-1 || vars.running) return false;
$("img:eq("+(vars.current+1)+")").animate({left:"100%"}, {queue: false , complete:function(){ $(this).hide() } });
},
click:function(){
if( vars.current == $("img").length-1 || vars.running) return false;
vars.running = true;
$("img:eq("+(vars.current+1)+")").animate({left:"0%"}, {queue: false, complete:function(){
$("img:eq("+vars.current+")").hide();
$(this).css({"z-index":0})
vars.current++;
vars.running = false;
if($(this).mouseover())
$(".right").trigger("mouseover");
} } );
}
})
i use the way from the other answer... but its deletet....
我使用其他答案中的方式......但它的删除......
mouseover:function(){
isOver = 'right';
if( vars.current == $("img").length-1 || vars.running) return false;
$("img:eq("+(vars.current+1)+")").removeAttr("style").css({position:"absolute",left:"100%","z-index":vars.current+1}).show().animate({left:"95%"}, {queue: false})
},
mouseleave:function(){
isOver = false
if( vars.current == $("img").length-1 || vars.running) return false;
$("img:eq("+(vars.current+1)+")").animate({left:"100%"}, {queue: false , complete:function(){ $(this).hide() } });
},
click:function(){
if( vars.current == $("img").length-1 || vars.running) return false;
vars.running = true;
$("img:eq("+(vars.current+1)+")").animate({left:"0%"}, {queue: false, complete:function(){
$("img:eq("+vars.current+")").hide();
$(this).css({"z-index":0})
vars.current++;
vars.running = false;
if(isOver)
$("."+isOver).trigger("mouseover");
} } );
}
by using the var isOver i could trigger the left or right
通过使用 var isOver 我可以触发左侧或右侧
回答by actionshrimp
To check whether something is being hovered, you can use the :hover selector, e.g.:
要检查是否有东西被悬停,你可以使用 :hover 选择器,例如:
$('#test').click(function() {
if ($('#hello').is(':hover')) {
alert('hello');
}
});
Example here: http://jsfiddle.net/AyAZx/5/
这里的例子:http: //jsfiddle.net/AyAZx/5/
回答by mathheadinclouds
actionshrimp's answer is broken as of jQuery 1.9.1.
从 jQuery 1.9.1 开始,actionshrimp 的回答就被打破了。
Use instead
改用
$("#idOfYourElement:hover").length > 0
in your if condition
在你的 if 条件下