css - 如何为失去焦点的元素设置过渡

Question

我有一个从黑色到深灰色的简单过渡，如下所示：

.navbar .logo:hover {
    -o-transition: 1s;  
    -ms-transition: 1s;
    -moz-tranistion: 1s;
    -webkit-transition: 1s;
    transition: 0.2s;

    color: darkgrey;

}

演示：http: //jsfiddle.net/yD46F/10/

但是当我停止悬停时，它会立即变回黑色，而不是变回黑色，我该如何解决这个问题？谢谢！

Answer 1

将您的过渡移动到单独的 CSS 规则：

.navbar .logo {
    -o-transition: 1s;  
    -ms-transition: 1s;
    -moz-tranistion: 1s;
    -webkit-transition: 1s;
    transition: 0.2s;
}

那里的问题是您当前正在将转换分配给具有伪类的元素:hover。因此，当鼠标从元素上移动时，它不再具有:hover类 => 没有transition样式属性。