jQuery - hover to trigger hover/mouseover on refresh?

Question

I'm using HoverIndent jQuery plugin for my dropdown menu, basically I hover on #link and it shows #submenu.

Unfortunately it doesn't work as expected. Everything looks fine at first but there's this case where I leave my cursor on #link, hit F5 (page refresh) and after refresh the HoverIndent isn't triggered, I have to move my cursor out of the #link, then move it back over to make HoverIndent working. What's even worse it's usually not working straight away (I have to wait a while for page to load). I've been trying everything including disabling all other JS, but without luck.

I've been investigating this for a while and looks like this code (basic jQuery no HoverIndent here):

$("#link").on("mouseover", function() {
  console.log("hover");
})

Or this:

$("#link").hover(function(){
  console.log("hover");
})

Works the same, so when I leave cursor or #link and hit F5 it doesn't log "hover" to console after refresh.

Be aware it works on jsfiddle etc. because there are pages loading in iframes, but it doesn't work locally.

Also it seems to be working on HoverIdent's page, I have absolutely no idea why. Am I right hover/mouseover shouldn't fire right after page load? If yes how to force them to and what's wrong with my HoverIndent?

Big update

It gets really weird. I've downloaded HTML5 Boilerplate and copied the whole HoverIndent demo page. The same hoverIntent.js file served locally doesn't seem to work while works from vendors server:

Here's the whole code (note you need to save http://cherne.net/brian/resources/jquery.hoverIntent.js in js directory next to index.html:




    

    
    

    
    

    

    


    

        

            What is hoverIntent?
            hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.
            Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...
            Download hoverIntent v1.8.0 (fully-commented, uncompressed)
            Download hoverIntent v.1.8.0 (minified)
            briancherne/jquery-hoverIntent (GitHub)

            Examples

            

            jQuery's hover (for reference)
            $("#demo1 li").hover( makeTall, makeShort );
            
                 
                 
                 
                hover ignores over/out events from children
            
            jQuery's built-in hover calls handlerIn and handlerOut functions immediately. If you move your cursor back and forth quickly across the tiles you'll see how the immediate execution can lead to problems.

            .hoverIntent( handlerIn, handlerOut )
            $("#demo2 li").hoverIntent( makeTall, makeShort );
            
                 
                 
                 
                hoverIntent also ignores over/out events from children
            
            hoverIntent is interchangeable with jQuery's hover. It can use the same exact handlerIn and handlerOut functions. It passes the same this and event objects to those functions.

            .hoverIntent( handlerInOut )
            $("#demo3 li").hoverIntent( toggleHeight );
            
                 
                 
                 
                 
            
            hoverIntent can also take a single handlerInOut, just like jQuery's hover.

            .hoverIntent( handlerIn, handlerOut, selector )
            $("#demo4").hoverIntent( makeTall, makeShort, 'li' );
            
                 
                 
                 
                 
            
            Unlike jQuery's hover, hoverIntent supports event delegation! Just pass in a selector of a descendant element.

            .hoverIntent( handlerInOut, selector )
            $("#demo5").hoverIntent( toggleHeight, 'li' );
            
                 
                 
                 
                 
            
            Unlike jQuery's hover, hoverIntent supports event delegation with handlerInOut.

            .hoverIntent( object )
        $("#demo6").hoverIntent({
        over: makeTall,
        out: makeShort,
        selector: 'li'
    });
    
            
                 
                 
                 
                 
            
            To control hoverIntent more precisely and override the default configuration options, pass it an object as the first parameter. The object must at least contain an "over" function. If the "over" function is sent alone, it will act just like handlerInOut.


            Common Configuration Options
            These are the common options you'll want to use. Note, nothing prevents you from sending an empty function as the handlerIn or handlerOut functions.

            over:
            Required. The handlerIn function you'd like to call on "mouseenter with intent". Your function receives the same "this" and "event" objects as it would from jQuery's hover method. If the "over" function is sent alone (without "out") then it will be used in both cases like the handlerInOut param.

            out:
            The handlerOut function you'd like to call on "mouseleave after timeout". Your function receives the same "this" and "event" objects as it would from jQuery's hover method. Note, hoverIntent will only call the "out" function if the "over" function has been called.

            timeout:
            A simple delay, in milliseconds, before the "out" function is called. If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. Default timeout: 0

            selector:
            A selector string for event delegation. Used to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element. Read jQuery's API Documentation for the .on() method for more information.


            Advanced Configuration Options
            Modify these if you are brave, test tirelessly, and completely understand what you are doing. When choosing the default settings for hoverIntent I tried to find the best possible balance between responsiveness and frequency of false positives.

            sensitivity:
            If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. Note that hoverIntent r7 and earlier perform this comparison using rectilinear distance, whereas more recent versions compare against euclidean (straight-line) distance for better accuracy and intuition. If you are upgrading from an older version, you may want to verify that the desired behavior is preserved. Default sensitivity: 6

            interval:
            The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the "over" function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. Default interval: 100


            Known Defects
            hoverIntent r5 suffers from a defect in Google Chrome that improperly triggers mouseout when entering a child input[type="text"] element. hoverIntent r6 uses the same mouseenter/mouseleave special events as jQuery's built-in hover, and jQuery 1.5.1 patched this issue. Thanks to Colin Stuart for tipping me off about this and for providing isolated code to demonstrate/test.
            This page uses jQuery 1.9.1 and hoverIntent r7, so when your cursor goes over the text input nothing should change (it should continue to read "enter parent" because you are still over this paragraph). 

 However, if you were using Google Chrome and if this page were using an older version of jQuery or hoverIntent, moving the cursor over the text input would improperly trigger the mouseout event, and the value would change to "leave parent".
            
            If you place an element flush against the edge of the browser chrome, sometimes Internet Explorer does not trigger a "mouseleave" event if your cursor leaves the element/browser in that direction. hoverIntent cannot correct for this.
            Please email me brian(at)cherne(dot)net if you have questions or would like to notify me of any defects.

            Release History
            
                v1.8.0 = (2014) Changed to Semantic Versioning (from r8 to v1.8.0). Removed U+FEFF character from beginning of JS file. Removed stray "jQuery" in favor of "$" for noConflict situations. Changed measurements to use euclidean (instead of rectilinear) distance. Thanks to github community for patches, suggestions, and fixes!
                r7 = (2013) Added event delegation via "selector" param/property. Added namespaced events for better isolation. Added handlerInOut support.
                r6 = (2011) Identical to r5 except that the Google Chrome defect is fixed once you upgrade to jQuery 1.5.1 (or later).
                r5 = (2007) Added state to prevent unmatched function calls. This and previous releases suffer from a defect in Google Chrome that improperly triggers mouseout when entering a child input[type=text] element.
                r4 = Fixed polling interval timing issue (now uses a self-calling timeout to avoid interval irregularities).
                r3 = Developer-only release for debugging.
                r2 = Added timeout and interval references to DOM object -- keeps timers separate from each other. Added configurable options. Added timeout option to delay onMouseLeave function call. Fixed two-interval mouseOver bug (now setting pX and pY onMouseEnter instead of hardcoded value).
                r1 = Initial release to jQuery discussion forum for feedback.

Can someone explain this? Document ready is "too fast" while serving local files or what? How to fix that, at least locally? :> Thank you!

elbblick · Accepted Answer

For loading your jQuery, you usually use the $(document).ready() method to ensure it loads AFTER the content of the site is loaded. So anything in there will not work straight away, but only after everything else is loaded (which, according to your question, takes some time). To fix this, you might try placing

$("#link").on("mouseover", function() { ... }

- which indeed is the long form of $("#link").hover() - directly after the element with the link id instead of inside the $(document).ready() block.

As for the moving-out-moving-in part: mouseover is triggered when you move the pointer from outside of the element to the inside. So having the pointer already inside the element will not trigger anything, even if moving around in that element.

Try using mousemove instead:

$("#link").on("mousemove", function() {
  console.log("hover");
})

Also, you might want to dive into the jQuery API documentation, as the functions and mouse events (and how they work) are explained there in detail: http://api.jquery.com/

EDIT: If using mouseenter, as suggested, it's basically the same problem: You will have to move out of the element and back in to trigger the event. The difference between mouseoverand mouseenteris explained here: What is the difference between the mouseover and mouseenter events?

jQuery - hover to trigger hover/mouseover on refresh?

Answers (2)

Related Questions