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; 
}