如何在图片标题中添加到文字的过渡

Question

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

<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文档陈述了两种表示RGB十六进制值的方式：

对于较大的调色板，请使用数字符号（哈希）和0至9，a至f范围内的三个十六进制数字来指定所需颜色的红色，绿色和蓝色分量。 字母a-f表示值10-15：
示例：＃000

对于完整的调色板，为每个组件指定两个十六进制数字：
示例：＃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> 

Answer 2

 a { text-decoration: none; color: #8B8080; transition:color 1s; } a:hover { 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>