jquery mouse over

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

      }); 
     }); 

所以我的問題是可您激活時，它是featured_des DIV停止mouseout()功能。 ATM它動畫的.pic類的正常工作，但是當它完成animate光標位於其激活mouseout並隱藏描述featured_des的寬度再次

例如::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

'鼠標移開' 會當鼠標離開的是什麼原因導致它離開特定element..regardless火。在你的情況下，重新調整尺寸會使圖片太小，鼠標不再能夠移動。

修改您的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。