:: after on: hover не работает в IE

Я нашел странное поведение в Internet Explorer (IE10, а также при эмуляции всех версий, поддерживающих ::after). При применении псевдоэлемента к состоянию наведения элемента (.element:hover::after) он не работает в IE, но он применяется во всех других основных браузерах.

http://jsfiddle.net/BramVanroy/9jpeZ/1/

#d1::after { /* Works in IE */
  content: "no hover needed";
  border: 1px solid blue;
  display: block;
}

#d2:hover::after { /* Does not work in IE */
  content: "Y U NO WORK IN IE";
  border: 1px solid blue;
  display: block;
}

Есть ли исправление CSS для этого? (Нет JS/jQuery.)

Ответы

Ответ 1

Кажется, это ошибка в IE10 (даже когда она эмулирует другие версии).

Однако я нашел обходное решение. Если вы добавите пустое правило CSS для #d2:hover, оно будет слушать #d2:hover::after, как показано в этот JSFiddle.

Ответ 2

У меня был экземпляр, где это тоже не работало в IE, Когда я переключил порядок ": hover" и ": after" в моей таблице стилей из

    .myclassname::after:hover

к

    .myclassname:hover::after

Мне удалось получить желаемый результат, вплоть до IE9 (ничего не тестировалось)