[英]CSS Pseudo Class Selectors
How would you / or is it possible to create an animation in css3 after the object in question has lost focus? 在相关对象失去焦点之后,如何/或如何在css3中创建动画?
Example: You Hover over a picture and a box appears above the picture slides into view like-so: 示例:将鼠标悬停在图片上,图片上方将出现一个框,如下所示:
.product_title {
border:5px solid black;
width:0px;
height:0px;
background-color:#deddcd;
/* margin:-130px 0 0 200px; */
position:relative;
z-index: 10;
border-radius: 10px;
opacity: 0.9;
}
.product_wrap:hover .product_title {
width:154px;
height:164px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
overflow: visible;
position: absolute;
Now what I want to do is "after" I move the mouse from the current object onto the next this activates the object I have just "lost focus" with to do transition-duration as well. 现在,我要做的是“之后”,将鼠标从当前对象移到下一个对象,这将激活我刚刚“失去焦点”的对象并执行过渡持续时间。 That way the box that appeared smoothly in 0.8s will disappear smoothly in 0.8s instead of instantaneously.
这样,在0.8秒内顺利出现的方框将在0.8秒内平稳消失,而不是瞬间消失。
Is it possible to do this with CSS3? CSS3可以做到这一点吗?
Just add 只需添加
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
to .product_title as well. 以及.product_title。
See: http://jsfiddle.net/pcJQ5/ 参见: http : //jsfiddle.net/pcJQ5/
不,您无法跟踪是否已经失去对CSS3的关注,因此必须结合javascript来实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.