特定の要素をホバリングしないときにのみ、hover()を実行します

ホバー効果を持つ小さなテーブルをコーディングするときに、行を変更させる原因となるこの問題があります。 しかし、オリジナルではリンクを使いたいと思っています。ユーザーがこれらのリンクにカーソルを合わせると、ホバー効果が発生するようにはしません

関連するコード。 popup は行のクラスです(ホバーオーバーを有効にすると、hoverIntentがアクティブになり、他の行に変更されます)。リンク内に linky という名前のクラスが含まれている span が除外されます。

<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'>mylink<!-- 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スクリプトに埋め込まれているため、すべてを書き直さなければならなかったのは残念です。

宜しくお願いします、 アアート

1
また、なぜ私の挨拶をしてくれるのですか?「こんにちは」は削除されますか? :(
追加された 著者 Aart den Braber,

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を使用していなかった場合は、部分的に完成したアニメーションの取り出しと元に戻す必要があるため、上記の方法を使用するだけで十分です。

1
追加された
私はそれに合わせて私の答えを更新しました。喜んで助ける
追加された 著者 wheresrhys,
元の()では、if(if linkIsHovered)を if(linkIsHovered)に変更する必要がありました。どうもありがとう!
追加された 著者 Aart den Braber,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript