仅在未悬停在某个元素上时才执行 hover()

Question

我遇到了这个问题，在编写带有悬停效果的小表格时，会导致它更改行。 但是，在原文中，我也想使用链接。当用户将鼠标悬停在这些链接上时，我不希望出现悬停效果。

相关代码，其中popup 是行的类（悬停在该行上会激活 hoverIntent 以将这些行更改为其他行）。带有链接的要排除的span 有一个名为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>

如果我忘记了一些东西，我很抱歉，但必须全部重写，因为它嵌入在 PHP 脚本中。

最好的问候， 美术

Answer 1

这样的东西应该可以工作

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"); 
    });
}

如果您不使用 hoverIntent，上述方法可能不起作用，因为您必须取消排队和撤消部分完成的动画，但使用 hoverIntent 可能就足以使用上述方法。