如何向圖像標題中的文本添加過渡

Question

我試圖添加transition:1s;並將文本過渡到color:#0000。在我的圖片下，我的圖片標題中的文字是'Joe Doe'。我嘗試了在我的CSS中的幾個地方，但沒有任何工作。我在我的WordPress網站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> 

使用創世紀Framwork與TRU千年主題這是我嘗試在其他幾件事情：

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

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

Answer 1

a { 
 
text-decoration: none; 
 
color: #8B8080; 
 
\t 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 - 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>