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