CSS：鼠标移出时的过渡不透明？ [英] CSS: transition opacity on mouse-out?

问题描述

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

为什么这只会在悬停时动画不透明度，使用鼠标离开对象？

Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?

在此演示： http://jsfiddle.net/ 7uR8z /

推荐答案

只应用到：hover 伪类，而不是元素本身。

You're applying transitions only to the :hover pseudo-class, and not to the element itself.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

演示：http://jsfiddle.net/7uR8z/6/

如果您不希望转换影响鼠标悬停事件，但只有鼠标悬停，您可以为：hover state：

If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

演示：http://jsfiddle.net/7uR8z/3/

这篇关于CSS：鼠标移出时的过渡不透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！