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

所以，我不太确定这是否是你所需要的，但我们走了。

我改变了你的意思：

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

要：

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

然后它只适用于您的<a href="">代码。

这是一个片段：

＆＃13;

body {
  background: #000;
}

div.foottext {
	color: #757575;
	position: absolute;
	bottom: 0;
	text-align: center;
	transition:0.3s;
}

div.foottext a: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;
}

＆＃13;

<div class="footer">
  <div class="foottext"><p>Navigation - <a href="#">Home</a> | <a href="#">About</a></p>
  </div>
</div>

＆＃13;

Answer 2

您不必为每个州指定transition属性。这些属性应该如何更新。当在悬停时转换不同的转换时，这可能会导致一些意想不到的问题。删除除第一个以外的所有transition属性：

https://jsfiddle.net/vhfd60dy/

为什么我的换色过渡延迟了？

2 个答案: