如何为失去焦点的元素设置转换

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样式属性.