Question

在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                      
            });

             });
       });

所以我的问题是否可以阻止mouseout()函数在featured_des div时激活。 atm它动画.pic类的宽度可以正常工作，但当它完成animate时，光标位于featured_des上方，激活mouseout并再次隐藏描述

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

Answer 1

在pic和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 });
});

Answer 2

当鼠标离开特定元素时，

'mouseout'将触发。无论是什么原因导致它离开。在您的情况下，重新调整大小会使图片太小而鼠标无法再覆盖它。

修改您的HTML，将功能描述和Pic包含在一个被归类为“容器”的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                      
          });
      });
});

Answer 3

我认为您正在寻找mouseenter和mouseleave所以事件不会冒出来：

$(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

jquery鼠标结束

3 个答案: