应用转换:悬停不:活动

Question

我不确定这是否可能,但这就是我所做的:

a {
    background-color: white;
    transition: all 1s;
}

a:hover {
    background-color: grey;
}

a:active {
    background-color: black;
}

但我希望转换不适用于:active(仅在:hover上),我试过这个:

a {
    background-color: white;
}

a:hover {
    background-color: grey;
    transition: all 1s;
}

a:active {
    background-color: black;
}

结果完全相同(除了效果没有反转).是否可以在完整的CSS中完成它.

谢谢!

Answer 1

a {
    background-color: white;
    transition: all 1s;
}

a:hover {
    background-color: grey;
}

a:active {
    background-color: black;
    transition: none;
}

标记：

<menu type=list>
    <li><a>home</a></li>
    <li><a>work</a></li>
    <li><a>contact</a></li>
    <li><a>about</a></li>
</menu>

演示： http: //jsfiddle.net/7nwLF/