Селекторы псевдо-классов CSS

Question

Как бы вы / или возможно создать анимацию в css3 после того, как рассматриваемый объект потерял фокус?

Пример: вы наводите курсор мыши на изображение, и над изображением появляется окно, которое скользит, как-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;

Теперь то, что я хочу сделать, это «после», когда я перемещаю мышь от текущего объекта к следующему, это активирует объект, с которым я только что «потерял фокус», чтобы сделать переход-длительностьтакже.Таким образом, поле, которое появилось плавно в 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.