0

私は2つのdivを持っています：青の上に赤。ユーザーがこのfadeOutの赤にカーソルを合わせたとき、および背景（青から抜け出したとき）にカーソルを合わせたときに、赤のfadeInが必要です。（私にとってもっと驚くべきことは、背景にカーソルを合わせたときではなく、マウスを離したときに赤いフェードインが発生することです。わかりません）

ここでの例life：http：//jsfiddle.net/DpD8S/

HTML：

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

CSS：

#red{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:red;
    cursor: pointer;
    z-index: 1; 
    }

#blue{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:blue;
    cursor: pointer; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer;  }

JQUERY：

$(function(){      
    $("#red").hover(function() {
        $("#red").fadeOut();
    });

    $("#background").hover(function() {
        $("#red").fadeIn("normal");
    });   
})​
4

5 に答える 5

2

あなたの問題はおそらく hover の定義です。

hover( handlerIn(eventObject) , handlerOut(eventObject)  )
hover( handlerInOut(eventObject)  )

つまり、関数を 1 つだけ渡すと、mouseenterとmouseleaveに対して呼び出されます。これらのイベントを使用するか、2 つの関数をhover

また、これはほとんど「後方」です。入るときに何かを隠すことは常に問題になります。これが、div の名前を変更する理由です。#active入るときは見せて、出るときは#inactive隠す。#active#active

ここにフィドルがありますhttp://jsfiddle.net/MwQaf/1/

于 2012-12-18T15:00:32.027 に答える
2

イベントをキャッチする透明な安定ゾーンを作成します。

<div id="background">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="transparent"></div>
</div>​

CSS:

#red{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:red;
    cursor: pointer;
    z-index: 1; 
    }

#blue{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:blue;
    cursor: pointer; 
    }

#transparent {
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:none;
    cursor: pointer; 
    z-index: 2; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer; 
}
​

次に、ホバー（関数（）、関数（））を使用します。そこでイベント関数の実行を停止することを忘れないでください:

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})​

http://jsfiddle.net/DpD8S/14/

于 2012-12-18T15:18:38.570 に答える
1

は#background div他の 2 つをラップしています。でイベントが発生する$('#background').hover()たびに、その子であっても関数が呼び出されます。hover#background

これを行うことで、あなたが望むものを達成できると思います：

$("#red").mouseenter(function() {
    $(this).fadeOut();
});

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

ただし、これにより、2 つの「フェード」アニメーションがキューに入れられるため、奇妙な動作が発生します。ユーザーがホバー インとホバー アウトをすばやく行うと、 がdiv応答していないように見え、奇妙なアニメーションが表示されます。

プラグインのインストールがオプションである場合は、このプラグインを試して色をアニメーション化できます。divこれにより、要素の数をそれ自体に減らすことさえできます。また、CSS を削減して、よりクリーンな JavaScript を使用することもできます。フィドルをチェックしてください。

于 2012-12-18T15:18:06.250 に答える
1

$("#background").hover(...) おそらく、次のように変更する ことをお勧めします。 $("#blue").mouseleave(...)

http://jsfiddle.net/DpD8S/18/

于 2012-12-18T15:01:42.893 に答える
0

ホバー関数は通常、次のように定義されます-

$('#red').hover(function() {
    $(this).fadeOut();
}, function() {
    $(this).fadeIn();
});

最初の関数は、.hover（）のmouseenter部分です。2番目の機能は、ホバーのマウスリーブ部分です。あなたの場合、バックグラウンドdivは問題に重要ではないように見えます。

于 2012-12-18T15:07:20.180 に答える