I have a hover event that highlights some text somewhere else on the page. When I leave the hover target, I don’t want the highlighting to change. So I don’t want a mouseout event. The problem is, when I hover over the one I want and then try to get to the highlighted items, I inevitably drag across another hover event which fires when I don’t want it to.
I tried the hoverIntent plugin but I get an error in Firebug saying hoverIntent is not a function even though it is loaded in the Head section.
Any other ideas? I looked but what I found seemed to just delay the execution of the event which I assume is fine if you want to cancel the hover actions on mouseout.
When you get a mouseover event, create a timer that will run in a few seconds. It should check if mouse is still over that block and if it wasn’t moved to another block and then trigger permanent highlight.
I’d code it like this:
var mouseCounter = 0,
lastItem = false;
if($(this).hasClass('perma-hover')) return; // already highlighted
lastItem = this;
setTimeout('checkMouse(' + mouseCounter + ')', 2000);
// check if there was a mouseout event since timer was created
if(counter != mouseCounter) return;
I would have the mouseout event but use a set a timer event to cancel the highlighting of the text. So the mouseout event fires and that set up a time to fire 1 or 2 seconds later which when it fires it cancels the highlighting.
Let me see if I can clarify. I have 9 anchor points amd if they hover over them, there is a list of items below the nine where certain words will highlight depending on which anchor they are hovering over. Then I want them to be able to move the mouse to the highlighted text and click it. But in doing so, they are moving the mouse over another anchor just to get there so I don’t want the highlighting to change until they go down and click the highlighted word, OR, they hover over a new anchor intentionally (say for .5 seconds.). Or to say another way, when moving to the highlighted text if they sweep over another anchor, I don’t want the highlighting to change. If they never move over another anchor or never click a highlighted word, there is no need for it to change. So mouseout is meaningless other than if the time from mouseover is > .5 seconds before a mouseout, then I want to fire the anchor.