Почему IE10 требует наличия правила p: hover {} для переходов для работы с псевдоэлементом?

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 требует, чтобы это правило присутствовало, чтобы переходы работали над псевдоэлементом? Если это считать ошибкой?

Ответ 1

Появляется регрессия

Это похоже на законную регрессию в Internet Explorer 10. Как указано в MSDN, поскольку пользователям Internet Explorer 7 удалось настроить таргетинг состояние зависания любого элемента, а не только a.

Любопытно, что я попробовал псевдо-класс :active, и, похоже, он работает так, как ожидалось. Далее, установив, что это регрессия, вы можете видеть, что, изменяя это на элемент a, переход происходит, как ожидалось (поскольку исторически a и :hover идут рука об руку).

Дополнительные рабочие места

Есть только несколько решений, о которых я могу думать в этот момент (ожидая, что это будет исправлено):

Используйте пустое исправление p:hover {}.
Измените свою разметку на целевой ::after на дочерний элемент p.
Измените селектор, чтобы использовать комбинаторы.

Первый элемент - это то, что вы указали в своем вопросе, и очень привлекательно, учитывая его простоту. Фактически, вы можете использовать :hover{} и получить те же результаты (вероятно лучшее решение).

Второй элемент также полезен, но немного менее желателен, поскольку требует модификации разметки, что не всегда возможно, и быть откровенным, немного глупым.

Последний вариант несколько интересен. Если вы измените селектор, основанный на отношениях родного брата, он волшебным образом начнет работать снова. Например, предположим, что в теле есть несколько элементов:

<h1>Hello, World</h1>
<p>This is my first paragraph. it does not animate.</p>
<p>This animates, with a pseudo-element.</p>

Теперь мы можем использовать комбинаторы для таргетинга на второй абзац:

p+p:hover::after {}

Этот селектор будет соответствовать любому абзацу, следующему абзацу, хотя это нежелательно. На этом этапе мы могли бы рассмотреть :nth-child или :nth-of-type, чтобы дополнительно указать, какой пункт мы хотим, даже используя общий комбинированный комбинатор:

h1~p:nth-of-type(2):hover::after {} /* Targets second <p> nearest <h1> */

Но в идеале мы бы нацелились на класс:

h1~.hoverme:hover::after {} /* Targets <p class="hoverme"> */

Решение двух Char?

Еще один шаг, возможно, вы не хотите, чтобы я был заблокирован, явно предоставляя общий тег для сестер. Вы также можете использовать универсальный селектор:

*~.hoverme:hover::after {} /* Targets <p class="hoverme"> among siblings */

Для этого требуется, чтобы тег p имел родных братьев и сестер, которые обычно ожидаются. Очень редко документ состоит не более чем из одного абзаца абзаца.

Я понимаю, что они не идеальны, но на данный момент это средство для достижения цели. Будем надеяться, что это будет разрешено в будущих выпусках Internet Explorer.

Ответ 2

Странно, эффект будет работать на <a> ссылка, а не тег абзаца.

Конечно, это ошибка или регрессия IE10. К счастью, вы нашли хорошее исправление.

Ответ 3

Это же явление появилось, когда я попытался добавить правило, чтобы изменить курсор на указатель. Тем не менее,

cursor: pointer;

должен быть включен в псевдо родительский элемент, он не может использоваться для таргетинга только строки псевдо-контента в IE10.

http://jsfiddle.net/maxw3st/SPHzj/22/ использует div как контейнер, http://jsfiddle.net/maxw3st/7sBVC/ использует обходное средство p: hover. Добавление div было предложено @simevidas и отлично работает для перехода, а не указателем. Кажется, что указатель появляется в IE10, когда он применяется к родительскому элементу псевдоэлемента.