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;
}

任何人都知道为什么这篇文章会立即跳出颜色而没有＆＃39; fade＆＃39;过渡？感谢。

Answer 1

正如你已经写了transition属性2次，2：nd 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>

文字颜色不受过渡影响？

1 个答案: