HTML:
<p>Hover</p>
CSS
p::after {
content: " here";
transition: all 1s;
}
p:hover::after {
font-size: 200%;
color: red;
}
Живая демонстрация: http://jsfiddle.net/SPHzj/13/ (работает в Firefox и Chrome)
Как вы можете видеть, я настроил переходы CSS в псевдоэлементе ::after
абзаца. Затем, когда абзац наводится, применяются два новых стиля для псевдоэлемента, которые переходят.
Это работает в Firefox и Chrome, но не в IE10. Мое рассуждение состояло в том, что IE не понимает селектор p:hover::after
, поскольку он работает в IE, если вы устанавливаете наведение на элемент предка, например. div:hover p::after
- живая демонстрация: http://jsfiddle.net/SPHzj/14/.
Однако это не так, поскольку IE действительно способен понять этот селектор. Трюк заключается в том, чтобы определить правило p:hover {}
. (Открыто @maxw3st.)
p:hover {}
Это правило может быть пустым. Простое присутствие этого правила сделает переходную работу в IE10.
Живая демонстрация: http://jsfiddle.net/SPHzj/15/ (также работает в IE10)
Что здесь происходит? Почему IE требует, чтобы это правило присутствовало, чтобы переходы работали над псевдоэлементом? Если это считать ошибкой?