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可能就足以使用上述方法了。

仅在不悬停在某个元素上时执行hover（）

1 个答案: