2

画像を含む円形の div があります。その画像にカーソルを合わせると、不透明度が黒に変わり、いくつかの情報を含む重複する div が表示されます。これまでのところ、ホバーを正常に実行できますが、ユーザーのマウスが 200px x 200px の div 境界を超えると、fadeIn が発生します。これは悪いことではありません。ユーザーが円内でマウスを動かすと、再び起動します。何か案は？

HTML:

<div class="prodava" onmouseover="jQuery('#fader-123').fadeIn('fast');" onmouseout="jQuery('#fader-123').fadeOut('fast');">                     
    <a href="www.google.com/asd" class="product_item_link">
        <img src="theimage.jpg" />
        <div id="fader-123" class="prodavahl" style="display: none;">
            <span>Hello</span>
        </div>
    </a>
</div>

CSS:

.prodava {
    position: relative;
    border: 1px solid white;
    border-radius: 1px;
    display: block;
    height: 200px;
    width: 200px;
    margin:10px;
}

.prodava img {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 101px; /* must be width + border */
    width: 200px;
    height: 200px;
    box-shadow: 1px 1px 1px rgba(0,0,0, 0.7);
}

.prodavahl {
    color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: black;
    opacity: 0.8;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    border-radius: 101px; /* must be width + border */
    box-shadow: 1px 1px 1px rgba(0,0,0, 0.7);
    text-align: center;
}

.prodavahl span {
    padding-top: 20px;
}
4

2 に答える 2

1

このLIVE DEMOを試す

<div class="prodava">                     
    <a href="www.google.com/asd" class="product_item_link">
        <img src="theimage.jpg" />
        <div id="fader-123" class="prodavahl" style="display: none;">
            <span>Hello</span>
        </div>
    </a>
</div>


jQuery(function( $ ){

    $('.prodava').hover(function( e ){
      $(this).find('.prodavahl').stop()[e.type=='mouseenter'?'fadeIn':'fadeOut'](200);
    });

});

上記のコードは、次とまったく同じことを行います。

jQuery(function( $ ){

    $('.prodava').mouseenter(function(){
      $(this).find('.prodavahl').stop().fadeIn(200);
    }, mouseleave(function(){
      $(this).find('.prodavahl').stop().fadeOut(200);
    });

});

これは次のように簡略化されています

jQuery(function( $ ){

    $('.prodava').hover(function( e ){
      if(e.type=='mouseenter'){
          $(this).find('.prodavahl').stop().fadeIn(200);
      }else{
          $(this).find('.prodavahl').stop().fadeOut(200);
      }
    });

});

そして、三項演算子を使用して一番上の例に縮小されます(?:)

于 2013-08-29T03:20:46.043 に答える
0

mouseenterおよびmouseleaveイベントまたはそれらのショートカット.hover()を使用する必要があります

mouseenter Doc から

mouseenter イベントは、イベント バブリングを処理する方法が mouseover とは異なります。この例でマウスオーバーが使用された場合、マウス ポインターが内部要素の上に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、 mouseenter イベントは、マウスが子孫ではなく、バインドされている要素に入ったときにのみハンドラーをトリガーします。したがって、この例では、マウスがアウター要素に入ったときにハンドラーがトリガーされますが、インナー要素にはトリガーされません。

<div class="prodava"> <a href="www.google.com/asd" class="product_item_link">
        <img src="theimage.jpg" />
        <div id="fader-123" class="prodavahl" style="display: none;">
            <span>Hello</span>
        </div>
    </a>
</div>

それから

jQuery(function ($) {
    $('.prodava').hover(function () {
        jQuery('#fader-123').finish().fadeIn('fast');
    }, function () {
        jQuery('#fader-123').finish().fadeOut('fast');
    })
})

デモ:フィドル

于 2013-08-29T03:20:35.973 に答える