CODEWITHSUNDEEP
javascriptjqueryhover
Aart den Braber
Aart den Braber

Reputation: 862

Only execute hover() when NOT hovering over certain element

there's this problem I'm having, while coding a little table with an hover-effect, causing it to change rows. However, in the original , I also want to use links. When the user hovers over those links, I don't want the hover-effect to take place.

Relevant code, in which popup is the row's class (hovering over that activates hoverIntent to change those rows into the other ones). The to be excluded span with a link within has a class named linky.:

<script type="text/javascript">
    $(document).ready(function(){
        $(".popup").hoverIntent( hover, original );

    });



    function hover(){
        $(this).addClass("hovering"); 
        $(".hovering .original").fadeOut(50, function() { 
            $(".hovering .hover").fadeIn(300); 
        });
    }

    function original(){
        $(".hovering .hover").fadeOut(50, function() { 
            $(".hovering .original").fadeIn(300); 
            $(".popup").removeClass("hovering"); 
        });
    }

</script>

<table>
  <tr class='header'>
    <th>row</th>
    <th>row</th>
    <th>row</th>
    <th>row (the ones below are just a javascript fix, because it otherwise changes position on hover, when using this system. They are not visible.)</th>
    <th>row</th>
    <th>row</th>
  </tr>
  <tr class='popup'>
    <td class='original'>First column</td>
    <td class='original'><span class='linky'><a>mylink</a></span><!-- this span should be excluded --></td>
    <td class='original'>Third column</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 1</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 2</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 3</td>
  </tr>
</table>

I'm sorry if I forgot something, but had to rewrite it all, because it is embedded in PHP-script.

Best regards, Aart

Upvotes: 1

Views: 462

Answers (1)

wheresrhys
wheresrhys

Reputation: 23570

Something like this should work

var linkIsHovered  = false; 

$(document).ready(function(){
    $(".popup").hoverIntent( hover, original )
      .delegate("a", "mouseover", flagLinkHover)
       .delegate("a", "mouseout", flagLinkUnHover);

});

function flagLinkHover() {
  linkIsHovered = true;
} 

function flagLinkUnHover() {
  linkIsHovered = false;
} 

function hover(){
    if (linkIsHovered) {return}
    $(this).addClass("hovering"); 
    $(".hovering .original").fadeOut(50, function() { 
        $(".hovering .hover").fadeIn(300); 
    });
}

function original(){
    if (linkIsHovered) {return}
    $(".hovering .hover").fadeOut(50, function() { 
        $(".hovering .original").fadeIn(300); 
        $(".popup").removeClass("hovering"); 
    });
}

If you weren't using hoverIntent the above probably wouldn't work as you'd have to unqueue and undo partially completed animations, but with hoverIntent it'll probably be enough to use the above approach.

Upvotes: 1

Related Questions