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

だけで、同様.product_titleする

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

を追加します。

参照：http://jsfiddle.net/pcJQ5/

Answer 2

あなたがcss3でフォーカスを失ったかどうかを確認することはできませんが、JavaScriptとの組み合わせでこれを達成する必要があります。