當用戶將鼠標懸停在div上時，在圖像中淡入淡出

Question

我有一個列表中的幾個div，並且當用戶將鼠標懸停在父div上時，我試圖讓.cat-icon（圖片）順利淡入。然後一旦鼠標退出div，圖像應該平滑淡出。我有一些麻煩，希望得到一些指導。

https://jsfiddle.net/srqvafp3/1/

HTML

<section class="highlights"> 
    <article> 
    <a href="/" class="image-link"> 
     <img width="351" height="185" src="http://i.imgur.com/f5h7bJo.jpg" class="image appear"> 
     <img class="cat-icon appear" width="60" height="60" src="http://i.imgur.com/imG6TE2.png"> 
    </a> 
    </article> 
</section> 

JS

jQuery('.highlights article').on('mouseenter', '.highlights .image-link img.cat-icon', function(){ 
    jQuery(this).addClass('cat-icon-hover'); 
}).on('mouseleave', '.highlights .image-link img', function(){ 
    jQuery(this).removeClass('cat-icon-hover'); 
}); 

CSS

.highlights { 
    position: relative; 
} 

.highlights article { 
    position: relative; 
} 

.highlights .image-link { 
    min-height: 42px; 
    display: block; 
    position: relative; 
} 

.highlights .image-link img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.highlights .image-link img.cat-icon { 
    left: 50%; 
    margin: -30px 0 0 -30px; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    width: 60px !important; 
} 

.highlights .image-link img:hover { 
    opacity: 0.8; 
} 

.appear { 
    opacity: 1; 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

Answer 1

只需使用的，而不是你的JavaScript以下。

$(".highlights article").hover(
    function() { 
    // Fade cat icon in on hover, at 200ms to opacity 1 
    $(this).find('.cat-icon').fadeTo(200, 1); 
    }, function() { 
    // Fade cat icon out when hover leaves, at 200ms to opacity 0 
    $(this).find('.cat-icon').fadeTo(200, 0); 
    } 
); 

JSFiddle

Answer 2

您添加和刪除懸停（ 「貓圖標懸停」 類）不在你的CSS - ？

.jQuery(this).addClass('cat-icon-hover');

Answer 3

可以使用$(this).toggleClass('cat-icon-hover');