CSS3 转换未按预期应用于所有 <a> 元素

Question

在我的标题中，我指定了这个 CSS。

a:link {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;
}

a:visited {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;
}

a:hover {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#82D1F7;
}

a:active {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;  
}

a {
    text-decoration: none;
}

对于大多数链接，过渡都有效，但是我访问过的链接不会在 Chrome 中播放动画(而且我假设其他 webkit 浏览器也是如此)但是在 Firefox 中，所有链接都可以很好地播放过渡动画.

链接在 Chrome 中不转换的原因可能是什么？ 网址是http://www.fuyuri.com

Answer 1

将事件状态移动到悬停状态之上。 - 链接、访问、事件、悬停、焦点，您需要将转换应用于所有状态。转换不是继承的。