請幫忙！ CSS3發光過渡問題

Question

我想跟隨本教程，因爲我非常喜歡這個效果。

CSS Text Glow on Hover with Transition Effects

但問題是，我設置背景顏色爲白色。

<style> 
.text-glow-hover-with-delay{ 
background: #FFFFFF; 
color: #fff; 
transition: text-shadow 3s; 
-moz-transition: text-shadow 3s; /* Firefox 4 */ 
-webkit-transition: text-shadow 3s; /* Safari and Chrome */ 
-o-transition: text-shadow 3s; /* Opera */ 
} 

.text-glow-hover-with-delay:hover{ 
text-shadow: 0 0 10px #fff; 
} 
</style> 

<div class="text-glow-hover-with-delay"> 
Put your mouse over me and I will glow slowly. 
</div> 

現在它不再發光。我在這裏CSS菜單。 :(

Answer 1

可能是因爲您無法看到陰影導致它變白。 但是，它的工作很好，順利。只是減少時間，3秒太多了。

Here is the working DEMO

，或者，如果你只想要一個白色的影子See Here

Answer 2

我刪除了過渡CSS，因爲它似乎搞亂了起來，我改變了顏色TPO黑色：

http://jsfiddle.net/Ce5SB/

Answer 3

對CSS的轉變必須從A點到B點

這意味着A點必須在自己的缺省類默認的文字陰影。

.text-glow-hover-with-delay{ 
     text-shadow:0 0 0 #fff;/*This is the missing piece*/ 

     .... 
} 

通過上述缺失的一塊， B點會知道從哪裏轉換。

也讓我知道如果上述不起作用。您可能還想嘗試過渡，因爲

transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/