html - 为什么我的颜色变化过渡延迟？

Question

我正在制作一个页脚，我希望它默认为深灰色，当您将鼠标悬停在它上面时它会变亮，然后当您将鼠标悬停在页脚中的链接上时，单个链接会变亮。

我制作了一个 JSFiddle 来展示我的代码的含义:https://jsfiddle.net/v1rxk09x/

你可以在 JSFiddle 中看得更清楚，但我想我在某个地方搞砸了我的 CSS:

div.footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    padding-left: 10px;

}

div.foottext {
    font-family: 'Queen of Camelot', sans-serif;
    color: #757575;
    position: absolute;
    bottom: 0;
    text-align: center;
    transition:0.3s;
}

div.foottext:hover {
    color: #cccccc;
    transition:0.3s;
}

div.foottext a:link
{
    text-decoration: none;
    color: #inherit;
    transition:0.3s;
}


div.foottext a:visited
{
    color: inherit;
    text-decoration: none;
}

div.foottext a:hover
{
    color: #ffffff;
    transition:0.3s;
    text-decoration: none;
}

它有效，但链接更改颜色会延迟，我不确定为什么，当您将鼠标悬停在“导航”上时，您会看到它全部完美地淡化为浅灰色，除了链接，链接有点过渡稍后。

感谢您的任何建议!

Answer 1

您不必为每个状态指定 transition 属性。属性应该如何更新。在悬停时声明不同的过渡时，这可能会导致一些意外的行为。删除除第一个之外的所有 transition 属性:

https://jsfiddle.net/vhfd60dy/