jQuery check hover status before start trigger

Question

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%

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%.

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

        $(".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

score 33 · Accepted Answer · answered May 17 '11 at 18:16

33

To check whether something is being hovered, you can use the :hover selector, e.g.:

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

Example here: http://jsfiddle.net/AyAZx/5/

answered May 17 '11 at 18:16

actionshrimp

5,219
3
23
26

I really like the brevity of this solution. Perhaps this is why there is no additional jQuery function to check whether the mouse is over an element. – KSev May 18 '12 at 01:14
6

that pseudo is unsupported, so I'm unsure whether this is a solution or not. – lorddarq Oct 13 '12 at 21:17
3

this solution does not work with jQuery 1.9 and higehr, cf @lorddarq – jones Feb 26 '13 at 11:39
dunno. I tested with 1.8 back then in october and it still didn't work. So its quite possible. But i don't think it has anything to do with the jquery part. Rather more with the css support, but I may be wrong. – lorddarq Feb 27 '13 at 12:47
1

As of jQuery 1.9, I believe the :hover pseudo only works with the .find() method. Testing the .find() with pseudo :hover for length should get the result you want. – Viet Jul 31 '13 at 06:43
**Warning**: `:hover` is not a valid jQuery selector: http://api.jquery.com/category/selectors/ (source: http://bugs.jquery.com/ticket/11574) – Pang Sep 24 '15 at 10:50
It still works if the browser supports `document.querySelectorAll(':hover')` – ekuusela Feb 05 '16 at 06:21

score 22 · Answer 2 · answered May 11 '13 at 19:14

22

actionshrimp's answer is broken as of jQuery 1.9.1.

Use instead

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

in your if condition

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

answered May 11 '13 at 19:14

mathheadinclouds

3,507
2
27
37

1

Excellent work keeping the thread up to date. StackOverFlow should actually have a deprecated flag... – Terrance00 Feb 07 '17 at 06:00

jQuery check hover status before start trigger

2 Answers2

Linked