Question

我在列表中有几个div，并且当用户将鼠标悬停在父div上时，我试图让.cat-icon（图像）顺利淡入淡出。然后，一旦鼠标退出div，图像应该平滑淡出。我有点麻烦，并希望得到一些指导。

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

您在悬停时添加和删除的课程（＆＃34; cat-icon-hover＆＃34;）不在您的CSS中？ -

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

Answer 2

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

Answer 3

只需使用以下内容而不是您的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

当用户将鼠标悬停在div上时淡入图像

3 个答案: