css - 在 :hover not :active 上应用过渡

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/