1
我试图实现覆盖divs时,我徘徊他们。 基本上我在mouseover上添加了一个类并删除了mouseleave上的类。 问题是我无法进行转换,因为该类的主要效果属于:伪元素之后。 实际上,我瞄准了placeholderclass股利称为.IMG目标转换jQuery addClass和removeClass
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");
});
});
我已经尝试转变适用于:后到.img目标,但似乎没有任何工作。 任何想法? :)
P.S.不幸的是使用伪元素后,实际上是覆盖主题结构的唯一方式。
谢谢你做的伎俩:) 有没有办法在removeClass上设置动画? – soldier
是的,@soldier,这是我的不好,我们只需要移动'转换:所有1s缓解;'到初始状态。 –
谢谢你的方式,我不知道我可以使用:hover :: after :) – soldier