1

ですから、マウスが上に移動すると緑色に変わる赤い正方形の画像があり、マウスが正方形を離れると赤に戻るとしましょう。次に、正方形にカーソルを合わせると緑色に変わり、その下に長方形が表示されるように、メニューのようなものを作成しました。

私がしたいことは次のとおりです。長方形が表示され、マウスを正方形から長方形の上に移動した後、マウスを長方形の外に移動するまで正方形を緑色のままにしたい.

jqueryでこれを行うにはどうすればよいですか? 私が使用するコードは次のようなものです：

$('.square').hover(function() {
    $(this).addClass('.green'); 
    }, function() {
    $(this).addClass('.red');
});
$('.square').hover(function() {
    $(this).children('.rectangle').show(); 
    }, function() {
    $(this).children('.rectangle').hide();
});
4

3 に答える 3

2

コードにいくつかのエラーがあります。

  1. クラスを削除することはありません。クラスを追加するだけです。jQuery は同じ要素に同じクラスを 2 回追加しないため、これは 1 回だけ機能し、その後の試行はすべて何もしません。
  2. クラスを追加するときは、ドット構文を使用しないでください。クラス名を単独で指定するだけです。

jQuery:

$('.square').hover(function() {
    $(this).addClass('green'); 
    $(this).children('.rectangle').show(); 
}, function() {
    $(this).removeClass('green');
    $(this).children('.rectangle').hide();
});

CSS:

/* Make sure .green comes after .red */
.red { background: red }
.green { background: green }
于 2010-01-27T15:45:56.883 に答える
1

私は最近同じ問題を抱えていました。私がしたことはmouseenter、「子」要素にもイベントを追加していたので、親から子に渡す間はオフになりません。基本的に、私は両方の要素を持っています（もちろん、これが機能するために少し重複しています）mouseenter。mouseleave

于 2010-01-27T16:00:36.593 に答える
0

メニューが正方形の内側にある場合は、次のようなことを試すことができます。

$('.square').bind("mouseenter",function(){
   $(this).addClass('green');
   $('.rectangle').show();
});

$('.square').bind("mouseleave",function(){
   $(this).addClass('red');
   $('.rectangle').hide();
});
于 2010-01-27T15:38:49.677 に答える