SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover delay with no mouseout

    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.

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    var mouseCounter = 0,
    lastItem = false;
    $('.whatever').mouseover(function()
    {
      if($(this).hasClass('perma-hover')) return; // already highlighted
      mouseCounter ++;
      lastItem = this;
      setTimeout('checkMouse(' + mouseCounter + ')', 2000);
    }).mouseout(function()
    {
      mouseCounter ++;
    });
    function checkMouse(counter)
    {
      // check if there was a mouseout event since timer was created
      if(counter != mouseCounter) return;
      $(lastItem).addClass('perma-hover');
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •