Jquery的哈弗，當我離開鼠標移到元素的行爲怪異

我有以下的html：Jquery的哈弗，當我離開鼠標移到元素的行爲怪異

<div id="join-us-subheader-imgs"> 
    <div class="subheader-img-wrapper"> 
     <img src="/wp-content/themes/lib/join_us/join-us_1.png"> 
     <p class="img-quote">"This is a quote example. And there's more text here."</p> 
    </div> 
    <div class="subheader-img-wrapper"> 
     <img src="/wp-content/themes/lib/join_us/join-us_2.png"> 
     <p class="img-quote">"This is a quote example. And there's more text here."</p> 
    </div> 
</div>

和CSS：

.subheader-img-wrapper { 
    float: left; 
    margin-right: 10px; 
    position: relative; 
} 

.subheader-img-wrapper img:hover{ 
    cursor: pointer; 
} 

.img-quote { 
    display: none; 
    width: 125px; 
    height: 80px; 
    position: absolute; 
    top: 0; 
}

AAAND的JavaScript：

$(document).ready(function() { 
    $(".subheader-img-wrapper").hover(
     function(){ 
      $(this).find('img:first').fadeOut("slow", function(){   
       $(this).parent().find('p:first').fadeIn("slow"); 
      }); 
     }, 
     function(){ 
      $(this).find('p:first').fadeOut("slow", function() {    
       $(this).parent().find('img:first').fadeIn("slow"); 
      }); 
     } 
    ); 
});

的東西是，當我把鼠標放在第一個上面時，它開始進出懸停功能，就像我

來源

2012-03-12 content01

你提供的jsfiddle – Jay 2012-03-12 20:56:30

這是因爲當.fadeOut功能結束後，元素收到mouseOut事件，觸發你的其他功能..

來源

2012-03-12 20:45:20

沒錯，要解決這個問題，我建議設置通過JavaScript'.subheader-IMG-wrapper'的寬度和高度（圖像寬度和高度）。 – freakish 2012-03-12 20:52:51

我該如何解決這個問題？ – content01 2012-03-12 20:53:04

這樣做:) THX！ – content01 2012-03-12 20:55:50

我認爲你需要做3種變化，

一個。 b。不要將鼠標懸停，而應該爲img標記和鼠標移出處理程序實現鼠標移動處理程序p標記

b。更改cs的.img-quoteposition: relative;

c。順序fadeIn和fadeOut使用回調方法，以便img和標籤不會同時顯示。

DEMO

來源

2012-03-12 20:57:19

Jquery的哈弗，當我離開鼠標移到元素的行爲怪異

回答

相關問題