2

在 Jquery 中，有一种方法可以阻止该功能在您确定它也不是孩子mouseout()时停止激活。div我的html代码。

 <div class="featured">
            <div class="featured_top">
                    <p><span class="theme">Theme</span> Transparent </p>                                        
            </div>
            <div class="pic" style="background: blue">
                <!-- image -->                              
            </div>
            <div class="featured_des">
                <p> this is awesome theme </p>
            </div>                                  
  </div>

我的 js(jQuery)

$(document).ready(function(){
      $(".pic").mouseover(function(){
        $(this).animate({
            width: 0                        
            });
        });

        $(".pic").mouseout(function(){
            $(this).animate({
                width: 214                      
            });

             });
       });

所以我的问题是，当它是div时，你能阻止该mouseout()功能激活吗？featured_desatm 它会为类的宽度设置动画.pic，效果很好，但是当它完成时animate，光标在它上面，featured_des它会激活mouseout并再次隐藏描述

示例:: http://www.grubber.co.nz/developer/_social_development/market.html

4

3 回答 3

1

pic在你的and周围添加一个包装器featured_des。

    <div class="picwrapper">
        <div class="pic" style="background: blue">
            <!-- image -->                              
        </div>
        <div class="featured_des">
            <p> this is awesome theme </p>
        </div>
    </div>

然后JS：

$('.picwrapper').hover(function() {
    $(this).find('.pic').animate({ width: 0 });
}, function() {
    $(this).find('.pic').animate({ width: 214 });
});
于 2012-11-16T21:52:07.607 回答
0

I think you're looking for mouseenter and mouseleave so the events don't bubble up:

$(document).ready(function() {
    $(".pic").width($(".pic .container img").width());
    $(".pic").height($(".pic .container img").height());
    $(".pic").mouseenter(function() {
        $(".pic .container").animate({
            width: 0
        }, function() { $(".pic .container img").hide(); });
    });

    $(".pic").mouseleave(function() {
        $(".pic .container img").show();
        $(".pic .container").animate({
            width: 214
        });

    });
});

Here's the fiddle.

于 2012-11-16T22:11:45.573 回答
0

当鼠标离开特定元素时，'mouseout' 将触发..不管是什么原因导致它离开。在您的情况下，重新调整大小会使 pic 太小以至于鼠标无法再悬停在它上面。

修改您的 HTML 以将功能描述和图片都包含在分类为“容器”的 div 中，这样您悬停的对象就不会消失而导致鼠标移出。

<div class="featured">
        <div class="featured_top">
                <p><span class="theme">Theme</span> Transparent </p>                                        
        </div>
        <div class="container">
             <div class="pic" style="background: blue">
                 <!-- image -->                              
             </div>
             <div class="featured_des">
                 <p> this is awesome theme </p>
             </div>                 
        </div>                 
</div>

还有你的 jQuery

$(document).ready(function(){
      $(".container").mouseover(function(){
          $(this).find('.pic').animate({
                 width: 0                        
          });
      });

      $(".container").mouseout(function(){
          $(this).find('.pic').animate({
                 width: 214                      
          });
      });
});
于 2012-11-16T21:52:25.060 回答