2

JQUERY では、単純なオーバーレイを作成しようとしています。ホバーするcontent1と消えてcontent2表示されます。次に、マウスアウトしcontent2てcontent1再表示します。

content2これはannoyingdiv、マウスがmouseoutイベント トリガーannoyingdivの上に移動した場合を除き、正常に機能します。どうすればこれを回避できますか? または、これはどのように解決できますか？

HTML

<div class="content1">blah blah</div>

<div class="content2">
    <div class="annoyingdiv">
        blah blah
    </div>
</div>

Jquery ジャバスクリプト

 $(function () {

    $('.content1').hover(function () {

        $(".content2").css("display", "block");
        $(this).css("display", "none");

    });

    $('.content2').mouseout(function () {

        $(".content1").css("display", "block");
        $(this).css("display", "none");
    });

});
4

2 に答える 2

4

mouseleaveイベントの代わりにイベントを使用しmouseoutます。

于 2012-04-24T13:32:52.283 に答える
2

CSS を使用します。

証明: http://jsfiddle.net/iambriansreed/vaQTU/

HTML:

<div class="parent">
    <div class="content1">blah blah content1</div>

    <div class="content2">
        <div class="annoyingdiv">
            blah blah annoyingdiv
        </div>
    </div>
</div>

CSS:

.parent .content2 {
    display: none;
}
.parent:hover .content1 {
    display: none;
}
.parent:hover .content2 {
    display: block;
}​​​
于 2012-04-24T13:35:06.690 に答える