html - 文本颜色不受过渡影响？

Question

我的文字要在 1 秒内从蓝色淡化为黄色。出于某种原因，即使背景颜色在时间设置中变淡，超链接的实际文本也会立即变为黄色，就好像没有任何过渡效果一样。相关代码如下:

<div id="container" class="text">
<a id="hypertext" href="Mental Enhancement.html" style="font-family:arial;font-size:120%;
text-decoration:none;">Text here to change color</a>
</div>

#hypertext {
padding:5px;
border-radius:10px;
-webkit-transition:color 1s;
-o-transition:color 1s;
-moz-transition:color 1s;
-ms-transition:color 1s;
transition:color 1s;
-webkit-transition:background-color 1s;
-o-transition:background-color 1s;
-moz-transition:background-color 1s;
-ms-transition:background-color 1s;
transition:background-color 1s;
}


#hypertext:hover {
background-color:red;
color:yellow;
}


#container {
position:relative;
}


a:link, a:visited, a:active {
color:black;
}


.text {
left:200px;
bottom:35px;
width:243px;
}

有谁知道为什么这段文字会立即跳变颜色而没有“淡入淡出”过渡？谢谢。

Answer 1

由于您已将 transition 属性编写了 2 次，因此第 2 次 transition 会覆盖第一个，因此请这样做:

transition: color 1s, background-color 1s;

#hypertext {
  padding: 5px;
  border-radius: 10px;
  -webkit-transition: color 1s, background-color 1s;
  -o-transition: color 1s, background-color 1s;
  -moz-transition: color 1s, background-color 1s;
  -ms-transition: color 1s, background-color 1s;
  transition: color 1s, background-color 1s;  
}
#hypertext:hover {
  background-color: red;
  color: yellow;
}
#container {
  position: relative;
}
a:link,
a:visited,
a:active {
  color: black;
}
.text {
  left: 200px;
  /*bottom: 35px;*/
  width: 243px;
}

<div id="container" class="text">
  <a id="hypertext" href="Mental Enhancement.html" style="font-family:arial;font-size:120%;
text-decoration:none;">Text here to change color</a>
</div>