왜 그렇게하는지 잘 모르겠습니다. 당신이 속성을 추가 할 때마다 :first-letter
psuedo 클래스, 애니메이션은 더 이상 작동하지 않습니다.
그만큼 :first-letter
Psuedo 클래스는 이전 호버를 취소하는 것 같습니다.
PSUEDO 클래스가 활성화 될 때마다 알 수 있듯이 이전 : 호버 (이 경우 전환)를 취소합니다.
그래서 당신의 경우 나는 당신의 애니메이션조차 실행하지 않습니다
나는 왜 이런 일이 일어나는지, 그것은 이전의 큰 버그처럼 보인다 :
:first-letter
Psuedo 클래스는 클래스 또는 의사 클래스 (예 : Div : First-Letter : Hover)가 뒤 따르는 경우 작동하지 않습니다.
지금은 다른 방법 인 것 같습니다.
이론은 언제 :first-letter
작동하지 않습니다. 그게 a :hover
의사 클래스는 "생성 된 컨텐츠"로 간주되지 않습니다.
다음을 사용하여 다음과 같은 내용을 생성하는 컨텐츠에 적용되는 첫 번째 레터 및 : 1 차 글자 및 : 1 라인 Pseudo 요소가 적용됩니다. 생성 된 컨텐츠.
원천 : http://www.w3.org/tr/css2/selector.html#before-and-after
그런 식으로 :hover
표시되지 않습니다.
나는 여러 문서를보고 아무것도 찾을 수 없었습니다 다른 애니메이션, 키 프레임, 트랜 포맷, 1 글자 PSUEDO 클래스 간의 관계. 호버 푸에도 클래스와 1 글자 PSUEDO 클래스 사이의 흥분, 즉 IE에서 서로 상호 작용하지 않을 수 있습니다.
tl; dr
아마도 버그 일 가능성이 높습니다.
당신의 :first-letter
Psuedo-Class는 The와 함께 작동하지 않습니다 :hover
부모 요소의 psuedo 클래스. 그만큼 :hover
표시되지 않는 Psuedo-Class이므로 애니메이션이로드되지 않습니다.
일하면서
컨텐츠를 HTML에 직접 배치하고 첫 글자를 스팬으로 감을 수 있습니다.
<div style="width:160px;height:300px;float:right;">
<a href="kapcsolat.html" class="animated menu5">
<span>K</span>apcsolat
</a>
</div>
앵커가 호버링 될 때 스타일을 추가하는 곳 :
.menu5:hover > span
{
color: black;
}