如何在图像标题中添加到文本的转换

Question

我正在尝试添加一个transition:1s;并将文本转换为color:#0000。所讨论的文本是“Joe”，在我的图像标题下。我试着在我的css中放了几个地方，但都没有效果。我正在我的Wordpress网站http://boasish.com/ios-8/上使用一个具有tru Chiliad主题的创世纪框架

<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

​

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>

​

Answer 2

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

MDN Color docs声明了表示RGB十六进制值的两种方法：

对于较大的调色板，通过在0- 9，a范围内使用数字符号(散列)和三个十六进制数字，指定所需颜色的红色、绿色和蓝色成分。字母a表示值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>

​