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 文档

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标进入 Outer 元素而不是 Inner 元素时，会触发处理程序。

<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 回答