0

ここでは単純化したケースを示します。私は2つのdivを上下に持っています。マウスを入力すると、一番上のもの (青) がフェードアウトし、後ろのもの (赤) がフェードインします。マウススリーブを装着すると、すべてが元の状態になります。

それはうまくいきます。唯一の問題は、おそらく一番上の div (青) がまだそこにあるときに、ユーザーがマウスを離したときに発生します。この場合、どのようにして元の状況に到達できますか?

ここで答えを確認できます: http://jsfiddle.net/Narcis/ywTBe/

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#blue{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:blue;
    z-index:1;
}

#red{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:red;
    z-index:0;
}

Jクエリ:

$(function () {
    $("#blue").mouseenter(function () {
        $("#blue").fadeOut("normal");
        $("#red").fadeIn();
    });

    $("#red").mouseleave(function () {
        $("#blue").fadeIn("normal");
        $("#red").fadeOut();
    });
})
4

2 に答える 2

1

これがjsfiddleです：http://jsfiddle.net/JZSRk/

        $(function(){
        $("#blue").mouseenter(function() {
            $("#blue").fadeOut("normal"); 
            $("#red").fadeIn();
        });
        $("#blue").mouseleave(function() {
            $("#blue").fadeIn("normal");
            $("#red").fadeOut();
        });
        })
于 2013-06-14T11:34:06.333 に答える