Detect mouse hover on page load with jQuery

Question

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 mo

Answer 1

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

Answer 2

I found the easiest way that is possible in the world! forget about JQ hover use its .mouseover and .mouseleave and define functions for both of them, it does not make any problem on load and after load!

   $('li').mouseover(function () {
       codes
   } 


   $('li').mouseleave(function () {
       codes
   }

Answer 3

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')

Answer 4

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.

Answer 5

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