过渡 jQuery addClass 和 removeClass

Question

当我将它们悬停时，我试图在 div 上实现覆盖。 基本上我在 mouseover 上添加一个类并在 mouseleave 上删除这个类。 问题是我无法进行转换，因为该类的主要效果属于 :after 伪元素。 我实际上是用一个名为 .img-target 的占位符类来定位 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 应用过渡，但似乎没有任何效果。 有任何想法吗？ :)

PS 不幸的是，由于主题结构，使用 after 伪元素实际上是覆盖 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>