css - 如何在图像标题中添加到文本的过渡

Question

我正在尝试添加 transition:1s; 并将文本转换为 color:#0000。有问题的文字是我图片下方图片说明中的“Joe Doe”。我尝试在我的 CSS 中放置多个位置，但没有任何效果。我在我的 Wordpress 网站上使用带有真正 Chiliad 主题的 Genesis Framwork http://boasish.com/ios-8/

<p class="wp-caption-text">Image: 
   <a href="http://mashable.com/2014/09/25/disney-characters-halloween-costumes/" onclick="ga('send', 'event', 'outbound-article', 
   'http://mashable.com/2014/09/25/disney-characters-halloween-costumes/', 'Joe Doe');" target="_blank">Joe Doe
   </a>
</p>

这是我在其他几件事中尝试过的:

a {
text-decoration: none;
color: #8B8080;
}

a:hover {
transition: 1s;
color: #0000 
}

Answer 1

您的:hover 颜色十六进制代码无效。它应该是 3 位或 6 位数字。

MDN Color docs陈述了表达 RGB 十六进制值的两种方式:

For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three hexadecimal digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:
Example: #000

For the full palette, specify two hexadecimal digits for each component:
Example: #000000

a {
text-decoration: none;
color: #8B8080;
}

a:hover {
transition: 1s;
color: #000000 
}

<a href="http://mashable.com/2014/09/25/disney-characters-halloween-costumes/" onclick="ga('send', 'event', 'outbound-article', 
   'http://mashable.com/2014/09/25/disney-characters-halloween-costumes/', 'Joe Doe');" target="_blank">Joe Doe
   </a>