Question

在有问题的对象失去焦点后，您/或是否可以在css3中创建动画？

实施例：将鼠标悬停在图片上方，图片上方会出现一个框，滑动到视图中，如此：

.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;

现在我要做的是“在”之后“我将鼠标从当前对象移动到下一个，这会激活我刚刚”失去焦点“的对象，同时执行转换持续时间。这样，在0.8秒内平滑出现的盒子将在0.8秒内平稳消失而不是瞬间消失。

是否可以使用CSS3执行此操作？

Answer 1

添加

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;

到.product_title。

请参阅：http://jsfiddle.net/pcJQ5/

Answer 2

如果你在css3中失去焦点，你就无法追踪，你必须与javascript结合使用。

CSS伪类选择器

2 个答案: