3

ばかげたタイトルで申し訳ありません。他に何も思いつきませんでした。誰かがすでにこれを尋ねていたら申し訳ありませんが、見つけられませんでした。

とにかくjQueryでギャラリーを作っています。div と画像、およびその div 内に前/次のボタンがあります。ボタンは画像の上に配置されており、デフォルトで非表示にし、マウスをdivの上に移動するとフェードインし、マウスをdivの外に移動するとフェードアウトします。問題は、マウスを画像からボタンに移動すると、画像とボタンを保持する div を実際に離れていなくても、javascript がそれを mouseout イベントとして登録することです。何が起こっているのかを示すために簡単なフィドルを作成しました：http://jsfiddle.net/7Ppbm/

誰でもこの問題の解決策を持っていますか? ありがとう

4

3 に答える 3

3

hover次の関数を使用する必要があります。

$("#button").hide();

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});
于 2012-08-29T16:41:20.900 に答える
0

CSSトランジションでそれをしないのはなぜですか? IE < 10 を除くすべての場所でサポートされています。 http://caniuse.com/#search=transition

変更された例: http://jsfiddle.net/b4e4M/

于 2012-08-29T16:52:13.890 に答える
0

あなたが見逃しているのは、単に何度もフェードアウトするのを止めるタイムアウトです。また、補足として、.on()jQuery 1.7.2 の新機能である を使用してください。

$("#button").fadeOut();
var timer;

$("#container img").on({
    mouseover: function () {
        clearTimeout(timer);
        $("#button").fadeIn();
    },
    mouseout : function () {
        timer = setTimeout(function () { 
            $("#button").fadeOut();
        }, 100);
    }
});

jsFiddle が更新されました

于 2012-08-29T16:25:00.840 に答える