CSS伪类选择器

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来实现这一点。