我正在制作一个页脚,我希望它默认为深灰色,当您将鼠标悬停在它上面时它会变亮,然后当您将鼠标悬停在页脚中的链接上时,单个链接会变亮。
我制作了一个 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;
}
它有效,但链接更改颜色会延迟,我不确定为什么,当您将鼠标悬停在“导航”上时,您会看到它全部完美地淡化为浅灰色,除了链接,链接有点过渡稍后。
感谢您的任何建议!
最佳答案
您不必为每个状态指定 transition
属性。属性应该如何更新。在悬停时声明不同的过渡时,这可能会导致一些意外的行为。删除除第一个之外的所有 transition
属性:
关于html - 为什么我的颜色变化过渡延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39978451/