jQuery在开始触发之前检查悬停状态答案

【问题标题】：jQuery check hover status before start triggerjQuery在开始触发之前检查悬停状态
【发布时间】：2011-08-27 11:13:27
【问题描述】：

我用 jquery 创建了一个小滑块插件。当鼠标悬停在左侧或右侧控件 div 上时，图像将从左侧或右侧滑入 5%。单击时图像会滑入 100%

问题是，当在动画中从左到右控制 div 的完整幻灯片期间移动鼠标时，我无法检查鼠标是否总是在左 div 上以再次触发 mouseover 事件。结果是从左到右的图像显示了5%。

有没有办法像这样检查鼠标悬停？

if($(this).mouseover())
$(".right").trigger("mouseover");

控制器 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");
                } } );
            }
        })

我使用其他答案的方式......但它的删除......

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

通过使用 var isOver 我可以触发左侧或右侧

【问题讨论】：

标签： jquery triggers slider

【解决方案1】：

要检查是否有东西被悬停，您可以使用 :hover 选择器，例如：

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

此处示例：http://jsfiddle.net/AyAZx/5/

【讨论】：

我真的很喜欢这个解决方案的简洁性。也许这就是为什么没有额外的 jQuery 函数来检查鼠标是否在一个元素上。
不支持那个伪，所以我不确定这是否是一个解决方案。
此解决方案不适用于 jQuery 1.9 和 higehr，参见 @lorddarq
不知道。我当时在 10 月份用 1.8 进行了测试，但它仍然无法正常工作。所以很有可能。但我认为它与 jquery 部分没有任何关系。更多的是css支持，但我可能错了。
从 jQuery 1.9 开始，我相信 :hover 伪仅适用于 .find() 方法。用伪 :hover 测试 .find() 的长度应该会得到你想要的结果。

【解决方案2】：

从 jQuery 1.9.1 开始，actionshrimp 的答案已失效。

改为使用

$("#idOfYourElement:hover").length > 0

在你的 if 条件下

http://jsfiddle.net/mathheadinclouds/ZKGqe/

【讨论】：

出色的工作使线程保持最新。 StackOverFlow 实际上应该有一个弃用的标志...