왼쪽 테두리의 CSS 전환은 마우스 오버시 작동하지만 마우스 아웃의 경우는 작동하지 않습니다.

Question

마우스를 왼쪽으로 변형하려면이 CSS가 있어야합니다. 마우스를 올리면 오른쪽으로 슬라이딩 효과가 발생합니다. 마우스가 태그를 벗어나면 border-left는 0px로 다시 변환되어야하고 왼쪽으로 되돌아가는 슬라이딩 효과가 발생해야하지만 그것은 일어나지 않습니다. 뭐가 문제 야?

a { 
    border-left: 0px solid #32acaf; 
    transition: border-left 0.7s; 
} 

a:hover { 
    background-color: #473828; 
    color: rgba(255, 255, 255, 1) !important; 
    border-left: 7px solid #32acaf; 
    transition: border-left 0.2s; 
} 

Answer 1

난 당신이 준 CSS 코드를 사용하고 난 HTML과 CSS 코드와도 같은 jsfiddle을 추가 한 브라우저 대부분의 출력을 확인했다.

HTML

<a>hai</a> 

CSS

a { 
    border-left: 0px solid #32acaf; 
    transition: border-left 0.7s; 
} 

a:hover { 
    background-color: #473828; 
    color: rgba(255, 255, 255, 1) !important; 
    border-left: 7px solid #32acaf; 
    transition: border-left 0.2s; 
} 

jsfiddle 링크

http://jsfiddle.net/4ZeCz/1929/