Transition jQuery addClass和removeClass

Question

当我悬停div时，我正试图在div上实现覆盖。基本上，我在mouseover上添加了一个类，在mouseleave上删除了这个类。问题是我不能进行转换，因为类的主要效果属于:after伪元素。实际上，我使用名为.img-target的placeholder类来定位div

CSS

.img-overlay{
height: 100%
width: 100%
transition: all 1s ease;
}

.img-overlay::after{
content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    transition: all 1s ease;
}

jQuery

$(window).ready(function() {

$(".img-target").mouseover(function() {
    $(this).addClass('img-overlay',1000);

});

$(".img-target").mouseleave(function() {
    $(this).removeClass("img-overlay");

});
});

我已经尝试将转换应用到:after和.img-target，但似乎都不起作用。有什么想法吗？:)

另外，不幸的是，由于主题结构的原因，在伪元素之后使用实际上是覆盖div的唯一方法。

Answer 1

您的问题是:after伪元素没有初始状态

​

$(window).ready(function() {
  $(".img-target").mouseover(function() {
    $(this).addClass('img-overlay', 1000);

  });

  $(".img-target").mouseleave(function() {
    $(this).removeClass("img-overlay");

  });
});

.img-target {
  position: relative;
  background-color: gold;
  height: 50px;
  width: 50px;
  transition: all 1s ease;
}
.img-target::after {
  content: "";
  display: block;
  transition: all 1s ease;
}
.img-overlay::after {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-target"></div>

​

如果您仅在中使用jQuery进行鼠标和我们的检测，则可以使用CSS代替.img-target:hover::after {...}。

​

.img-target {
  position: relative;
  background-color: gold;
  height: 50px;
  width: 50px;
  transition: all 1s ease;
}
.img-target::after {
  content: "";
  display: block;
  transition: all 1s ease;
}
.img-target:hover::after {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-target"></div>

​