我在列表中有几个div,当用户将鼠标悬停在父div上时,我试图让每个

(图像)平滑地淡入。然后,一旦鼠标退出.cat-icon,图像应平滑淡出。我有点麻烦,希望获得一些指导。

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

最佳答案

只需使用以下内容代替您的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

10-07 16:15
查看更多