:: after on：hover在IE中不工作 [英] ::after on :hover does not work in IE

问题描述

我在Internet Explorer（IE10以及当模拟支持 :: after 后的所有版本）时发现了一些奇怪的行为。当将伪元素应用到元素（ .element：hover :: after ）的悬停状态时，它在IE中不起作用，但在所有其他主要浏览器。

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

 ＃d1 :: after {/ * Works in IE * / 
 content：no hover需要; 
 border：1px solid blue; 
 display：block; 
} 
 
＃d2：hover :: after {/ *在IE * / 
中不起作用content：Y U NO WORK IN IE; 
 border：1px solid blue; 
 display：block; 
} 
  

（没有JS / jQuery。）

解决方案

这似乎是IE10中的一个错误（即使当它模拟其他版本） / p>

但我发现了一个解决方法。如果为＃d2：hover 添加一个空的CSS规则，它将侦听＃d2：hover :: after ，如此JSFiddle 所示。

I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after). When applying the pseudo-element to a hover state of an element (.element:hover::after) it does not work in IE, but it does in all other major browsers.

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;
}

Is there a CSS fix available for this? (No JS/jQuery.)

解决方案

This seems to be a bug in IE10 (even when it emulates other versions).

I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.

这篇关于:: after on：hover在IE中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！