2

私は現在、次のような基本的なありふれたメニュー ツリーを持っています。

<ul id="nav">
  <li>
    <a href="#">home</a>
    <div class="controls">Some controls go here</div>
    <ul>
      <li>
        <a href="#">item 1</a>
        <div class="controls">Some controls go here</div>
      </li>
      <li>
        <a href="#">item 2</a>
        <div class="controls">Some controls go here</div>
      </li>
    </ul>
  </li>
</ul>

「コントロール」クラスの div は、最初は非表示になっています。私が実現したいのは、li にカーソルを合わせると、それぞれの li のコントロールが表示されることです (マウスを離すと、それらは再び非表示になります)。この問題は、ネストされた li の 1 つにカーソルを合わせると発生し、親コントロールも表示されます。私が使用しているjQueryは次のとおりです。

    $("#nav li").hover(
        function() {
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
    );

ご協力いただきありがとうございます。レミー

4

2 に答える 2

5

イベントが親にバブリングしないように、ホバー関数でイベントの伝播を停止してみてください。また、hoverIntentプラグインを調べて、「ホバーした」要素が互いに接近している場合に「点滅する」ホバー効果の問題を解決することもできます。

$("#nav li").hover(
    function(e) {
            e.stopPropagation();
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
);
于 2009-08-25T12:18:09.570 に答える