[英]Transition jQuery addClass and removeClass
I'm trying to achieve an overlay on divs when i hover them.当我将它们悬停时,我试图在 div 上实现覆盖。 Basically i'm adding a class on mouseover and removing the class on mouseleave.
基本上我在 mouseover 上添加一个类并在 mouseleave 上删除这个类。 The problem is that i cannot make a transition since the main effect of the class belongs to the :after pseudo element.
问题是我无法进行转换,因为该类的主要效果属于 :after 伪元素。 I'm actually targeting the div with a placeholderclass called .img-target
我实际上是用一个名为 .img-target 的占位符类来定位 div
CSS 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 jQuery
$(window).ready(function() {
$(".img-target").mouseover(function() {
$(this).addClass('img-overlay',1000);
});
$(".img-target").mouseleave(function() {
$(this).removeClass("img-overlay");
});
});
I've already tried to apply a transition to the :after and to the .img-target but nothing seems to be working.我已经尝试对 :after 和 .img-target 应用过渡,但似乎没有任何效果。 Any ideas?
有任何想法吗? :)
:)
PS unfortunately using after pseudo element is actually the only way to overlay the div becouse of the theme structure. PS 不幸的是,由于主题结构,使用 after 伪元素实际上是覆盖 div 的唯一方法。
Your problem is the :after
pseudo element does not have an initial state你的问题是
: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>
if you are only using jQuery for the mouse in and our detection you can use CSS instead .img-target:hover::after {...}
:如果您只使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.