애니메이션에서 호버 상태가 제대로 작동하지 않습니다.

Question

사용자가 마우스를 가져갈 때 (:hover) 요소가 왼쪽에서 오른쪽으로 움직이므로 요소가 마우스에서 벗어납니다. 따라서 :hover 상태는 정상 상태로 돌아 가야하지만 이는 발생하지 않습니다. 뭐가 잘못 되었 니?

#test { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    background: red; 
    z-index: 20; 
    transition: left 1s linear; 
} 

#test:hover { 
    left: 200px; 
    background: green; 
} 

여기에 jsFiddle demo이다.

Answer 1

#test:hover { 
    left: 100px; 
    background: green; 
} 

내에서 자체의 폭과 그렇게 할 수있는 전환의 힘 밖에 갈 요소를 말한다. 호버 천이를 left: 100px;으로 변경하면 작동합니다.

천이가 마스터이고 원하는대로 슬레이브를 가리키면됩니다.)