Question

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

Answer 1

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.