jquery 위로 마우스

Question

에서 Jquery에는 특정 div을 지나칠 때 mouseout() 함수가 중지되는 것을 중지하는 방법이 있습니다. 자식도 아닙니다. 내 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 사업부 때 활성화에서 mouseout() 기능을 중지 할 수 있습니다. 다시

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

Answer 1

이 주위에 래퍼를 추가 잘 작동하지만 animate을 완료하면 커서가 설명을 mouseout을 활성화하고 숨 깁니다 featured_des 이상이다 .pic 클래스의 폭을 애니메이션 ATM 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 : 마우스가 떠나 그 어떤 원인의 특정 element..regardless을 떠날 때

$('.picwrapper').hover(function() { 
    $(this).find('.pic').animate({ width: 0 }); 
}, function() { 
    $(this).find('.pic').animate({ width: 214 }); 
}); 

Answer 2

이 '로 마우스를'실행됩니다. 귀하의 경우, 크기 조정은 사진이 너무 작아 마우스가 더 이상 보이지 않게합니다.

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

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.