悬停时平滑覆盖

Question

当我将光标放在图像上时，我试图制作一个平滑的效果叠加，但我不是我做错了...叠加显得如此之快 我不知道我的问题是在我的JS还是CSS

这是我的jsfiddle

css方：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

Js方面：

    $('.video-cover').after().stop(true, true).addClass('video-cover-hover', 1000);

https://jsfiddle.net/fkd0ewev/9/

Answer 1

要使transition属性起作用，它必须存在于元素之前您对该元素进行任何修改。您的逻辑无效，因为您已将transition规则添加到附加到.video-cover的类中。

要解决此问题，修改CSS以便在页面加载时.video-cover:after存在，然后您可以使用.video-cover-hover类来更改它的背景颜色，如下所示：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.video').hover(function() {
    $('.video-cover').addClass('video-cover-hover');
    $(this).find('.video-cover').removeClass('video-cover-hover');
  }, function() {
    $('.video-cover').removeClass('video-cover-hover');
  });
});

＆＃13;

.video {
  background-color: #EFEFEF;
  width: 196px;
  height: 290px;
  float: left;
  position: relative;
  overflow: hidden;
  color: white;
  margin-right: 10px
}

.video-cover:after {
  content: '';
  transition: all 0.5s ease;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: transparent;
}

.video-cover.video-cover-hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

.video-cover img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="bloc-liste-video">
  <div class="liste-video">
    <div class="video" id="video-1">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-2">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-3">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-4">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;