3

それで、ネストされたdivのブロックがあるとしましょう：

<div class='nested'>
 <div class='nested'>
  <div class='nested'></div>
 </div>
</div>

私はこの種の振る舞いをしたい：

  1. divにカーソルを合わせます。その特定のdivは背景色を変更しますが、その子は変更しません。
  2. そのdivの子にカーソルを合わせます。繰り返しますが、子は色を変更しませんが、（重要な）親は元の色に戻ります。
  3. 親divに戻ります。子供は元の色に戻り、親はもう一度色を変更します。

最初の2つのステップは簡単です。

$(function() {
  $('.nested').bind('mouseenter',function() {
    $(this).css('background-color','#EEE');
    $(this).parent().css('background-color','white');
  }).bind('mouseleave',function() {
    $(this).css('background-color','white');
  });
});

しかし、最後のステップで問題が発生しました。これは、子divに入ると、mouseenterイベントが親でアクティブなままであるためです。私がやったことは、そうではないように見せることだけです。親でmouseleaveをトリガーする唯一の方法は、ネストされたブロックを完全に終了して、再度入力することです。これを回避する方法はありますか？

4

1 に答える 1

4

親にmouseleaveイベントを追加し、その上の親の色を削除します。

$(function() {
  $('.nested').bind('mouseenter',function() {
    $(this).css('background-color','#EEE');
    $(this).parent().css('background-color','white');
  }).bind('mouseleave',function() {
    $(this).css('background-color','white');
    // put the color back on the parent
    $(this).parent().css('background-color', '#EEE');
  });

  // remove the color from the parent
  $(".parent").bind("mouseleave", function() {
    $(this).css('background-color','white');
  });
});
于 2010-02-17T20:34:22.157 に答える