文字顏色不受轉換影響？

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>