0

マウスオーバー機能に問題があります。div があり、その上にカーソルを合わせると、子 div がフェードインし、mouseleave でフェードアウトします。子 div は問題なく表示されますが、マウスを上に移動するとフェードインとフェードアウトが繰り返され、イライラします。
ここにフィドルがあります:http: //jsfiddle.net/NK2mt/1/と私のjQuery関数もここにあります:

jQuery(document).ready(function(){

jQuery(".hover").hide();

    jQuery('.grid-block').mouseover(function() {
        jQuery(this).children('.hover').stop(true, true).fadeIn();
        });

    jQuery('.grid-block').mouseout(function() {
        jQuery(this).children('.hover').stop(true, true).fadeOut();
        });   
        return false; 
});

divがフェードアウトして再びフェードインするのは、マウスを上に移動したときですが、.block-text-subそれに対する修正が見つからないようです。

4

3 に答える 3

1

'mouseover' の代わりに 'mouseenter' を使用し、'mouseout' の代わりに 'mouseleave' を使用します。

 jQuery(document).ready(function(){

    jQuery(".hover").hide();

        jQuery('.grid-block').mouseenter(function() {
            jQuery(this).children('.hover').stop(true, true).fadeIn();
            });

        jQuery('.grid-block').mouseleave(function() {
            jQuery(this).children('.hover').stop(true, true).fadeOut();
            });   
            return false; 
    });
于 2013-02-19T21:19:08.360 に答える
0

CSS3でも同じことができますtransition（FADE効果）

.grid-block:hover .hover {
    opacity: 1;
}
.grid-block .hover {
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    opacity: 0;
}

デモ: http://jsfiddle.net/NK2mt/3/

于 2013-02-19T21:16:33.433 に答える
0

hoverの代わりに使用する必要がありmouseoverます。mouseenterとmouseleaveイベントの両方のハンドラーをバインドします。

基本的に、呼び出しhover

$(selector).hover(handlerIn, handlerOut)

は次の省略形です。

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

ちらつきを取り除く必要があります。

于 2013-02-19T21:16:51.967 に答える