1

私は2つのdivを持っています：

<div class="outer">
    <div class="inner">Example</div>
</div>

そして私はjQuery関数を持っています：

$(function(){
    $('.outer').mouseout(function () {
        $('.outer).attr("style", "background-color: white");
    });

    $('.outer').mouseover(function () {
        $('.outer).attr("style", "background-color: red");
    });

    $('.inner').mouseout(function () {
        $('.inner).attr("style", "background-color: white");
    });

    $('.inner').mouseover(function () {
        $('.inner).attr("style", "background-color: red");
    });
});

「アウター」にカーソルを合わせると、アウターの背景が赤くなります（いいね！）。インナーにカーソルを合わせると、インナーとアウターが赤くなります…良くありません。

アイデアはクリックイベントにも当てはまります。jQuery関数にいくつかのクリック関数を追加して内側のdivをクリックすると、スクリプトは内側と外側のdivをクリックします。

内側にカーソルを合わせたときに両方ではなく、1つのdivを赤に設定したいだけです。また、将来的には、この機能をクリックイベントに使用したいと思います。

これは本当に簡単だと思いますが、どういうわけか理解できません:(

誰が私を助けられるか？

前もって感謝します

4

2 に答える 2

2

stopPropagation私はあなたがイベントメソッドを探していると思います、それ：

イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

したがって、解決策は次のようになります。

$(".inner").hover(function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: red");
}, function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: white");
});

デモ：http： //jsfiddle.net/TZjpT/

于 2012-06-23T10:04:45.753 に答える
0

@Zoltan Toth：手で入力したので、引用符を忘れてしまったかもしれません:)

他のすべての場合：stackoverflowを閉じたところ、バックグラウンドで問題に対する可能な回答が記載されたWebページがありました。私はそれを見ませんでした...そしてそれは私の問題を修正しました：

（要素= div）

 $(element).bind("click", function (event) {
     $(this).attr("style", "background-color: red");
     event.stopPropagation();
 });

ご不便おかけしてすみません

于 2012-06-23T10:07:28.507 に答える