CSS градиент не disaaper наведя

Question

Я хочу, чтобы создать градиент в конце звена, как это:

градиент должен исчезнуть при наведении курсора на него.

Мой 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; 
}