Detect mouse hover on page load with jQuery

问题

I wanted to detect whether the mouse was over an element when the web page was loaded. It appears this is not possible with jQuery - mouseover, hover etc. require a mouse move; as does getting the current mouse position (to compare with element bounds).

I have not seen this specific question asked, but have seen people saying the various bits of this aren't possible...

回答1:

My solution: add a new CSS value with the hover pseudoselector, then test for that. This seems to only work sometimes, however.

CSS:

#el:hover {background-color: transparent; }

jQuery:

if ($('#el').css('background-color') == 'transparent')

回答2:

Here is how I solved it:

/** detect if the mouse was hovering over and element when the page loaded */
function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('loaded, but NOT hovering over ' + sel)
    }
}

then I called it like so:

detectHoverOnLoad({selector: '#headerNav'})

With more testing, I noticed that at times, if the mouse was moving, it did not always detect the hover, so I added a fallback in the else to detect the mouse moving over the element:

function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('NOT hovering')
        $(sel).one('mousemove', function (e) {
            if ($(e.target).parents(sel).length) {
                console.log('MOUSEMOVEed over ' + sel)
            }
        });
    }
}

回答3:

EDIT: after testing, I have concluded this will not work. Save yourself the time and try something else.

I think you can actually make the element bounding box work.

This is a bit of a hack, but the strategy is to use element.offset() to get the coordinates of the element relative to the document, along with element.width() & element.height() to create a bounding box for the mouse position. You can then check an event's .pageX and .pageY values against this bounding box.

As you correctly said, you need an event to get these coordinates, which doesn't work for you since you want them immediately. Nonetheless, have you considered faking a mouse click event by calling $('#some-element').trigger('click') after document load? You could register a function to check the bounding box via $('#some-element).click() beforehand and see what it does.

回答4:

Why not! :)

Here is a solution of mine:

DEMO

Code from the demo:

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {
       alert('The mouse was over'+ elId );
    }
}
$(".el").mouseleave(handler);

来源：https://stackoverflow.com/questions/6586166/detect-mouse-hover-on-page-load-with-jquery

标签

jquery

hover

mouseover