Увядание изображения, когда пользователь наводит курсор на div

Question

У меня есть несколько div в списке, и для каждого из них я пытаюсь получить .cat-icon (изображение), чтобы плавно исчезать, когда пользователь наводится над родительским div. Затем, как только мышь выйдет из 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');