第二個函數jQuery懸停問題（鼠標懸停）

Question

在鼠標懸停時遇到.hover（）問題。似乎沒有工作。它適用於淡入淡出，但沒有淡出。我基本上在另一幅圖像上淡出。 '克隆'有一個較低的Z索引開始，我把它提出來，然後在懸停時淡入。兩張圖像都堆疊在一起

小提琴：http://jsfiddle.net/C6AfM/

中的JavaScript：

$.fn.hoverImage = function() { 
    //add event handler for each image (otherwise it will add the same event handler for all images all at once) 
    this.each(function() { 
     var img = $(this); 
     var magnifyImage = img.next(); 

     //hover: first function is for mouseover, second is on mouseout 
     img.hover(function() { 
      magnifyImage.css("z-index", 2).animate({ 
       opacity:0.8   
      }, 200); 
     }, function() { 
      magnifyImage.css("z-index", -200).animate({ 
         opacity:0 
        }, 200); 
     }); 
    }); 
} 

的HTML：

<span class="img-span">         
    <img src="(url)" class="project-img">                  
    <img src="(url)" class="project-img-clone">                  
    <figcaption>Caption</figcaption> 
</span> 

的CSS：

.img-span { 
    width:27.08333333333333%; /* 260/960 */ 
    margin-right:3.009259259259259%; /* 26/864 */ 
    display:inline-block; 
    vertical-align: top; 
    position:relative; 
} 

.project-img { 
    max-width:100%; 
} 

.project-img-clone { 
    position:absolute; 
    top:0; 
    left:0; 
    max-width: 100%; 
    z-index:-200; 
    opacity:0; 
} 

Answer 1

問題是因爲克隆是呈現開放克鼠標離開沒有在原始圖像中燒，它是由克隆

$.fn.hoverImage = function() { 
    //add event handler for each image (otherwise it will add the same event handler for all images all at once) 
    this.each(function() { 
     var img = $(this); 
     var magnifyImage = img.next(); 
     console.log(magnifyImage); 

     //hover: first function is for mouseover, second is on mouseout 
     img.add(magnifyImage).hover(function() { 
      magnifyImage.css("z-index", 2).animate({ 
       opacity:0.8   
      }, 200); 
     }, function() { 
      magnifyImage.css('opacity', 0); 
     }); 
    }); 
} 

演示射擊：Fiddle

---

或者使用pointer-events - IE9 +

.project-img-clone { 
    position:absolute; 
    top:0; 
    left:0; 
    max-width: 100%; 
    z-index:-200; 
    opacity:0; 
    pointer-events: none; 
} 

演示：Fiddle