CSS梯度不要徘徊

Question

disaaper我想的是這樣的鏈接年底創建漸變：盤旋在它時

梯度應該消失。

我HTML代碼（jsfiddle）：

<a href="#">https://<span class="txt">in Phrase Overview</span></a> 

CSS代碼

.txt { 
    padding: 12px 16px; 
    color:blue; 
    top:0; 
    -webkit-box-shadow: -10px 0 10px -2px #ffffff; 
    box-shadow: -10px 0 10px -2px #ffffff; 
} 

span:hover {  
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

但是，當我將鼠標懸停它，梯度不會消失：

請幫我檢查一下這個問題。

Answer 1

你的風格改成這樣：

.txt{ 
    padding: 12px 16px; 
    color:blue; 
    top:0; 
    -webkit-box-shadow: -10px 0 10px -2px #ffffff; 
    box-shadow: -10px 0 10px -2px #ffffff; 
} 
a:hover span.txt{  
    -webkit-box-shadow: none; 
    box-shadow: none; 
}