CSS:鼠标移出时的过渡不透明度？

Question

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

为什么这只会在我悬停时为动态不透明设置动画,而不是在我用鼠标离开对象时？

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

​

Answer 1

您只将转换应用于:hover伪类,而不是元素本身.

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

如果您不希望转换mouse-over仅影响事件,则mouse-out可以关闭:hover状态:

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