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

为什么这只在我将鼠标悬停在对象上而不是在我用鼠标离开对象时动画不透明度？

此处演示:https://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;
}

演示:https://jsfiddle.net/7uR8z/6/

如果您不希望转换影响 mouse-over 事件，而只希望影响 mouse-out，您可以为 关闭转换:悬停 状态:

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

演示:https://jsfiddle.net/7uR8z/3/