11

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.)

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • `:hover` is a pseudo-class (one colon). `::after` is not a pseudo-class, but a pseudo-element (two colons). These are two different things. That said, if `::after` is working but `:hover::after` isn't, then something else is wrong, because your fiddle works perfectly in IE9... as it should. – BoltClock Jan 14 '13 at 16:17
  • @BoltClock Ow, stupid mistake! And, you mean to tell me that the hover state (and showing of the `after` element) works for you? Here (Windows 8, 64 bit) it does not for IE10, 9 or 8. – Bram Vanroy Jan 14 '13 at 16:39
  • Strange... it works for me on IE9 on Windows 7. – BoltClock Jan 14 '13 at 16:43
  • And you are **sure** that the hover state works? I think I'll contact MS then. – Bram Vanroy Jan 14 '13 at 16:56
  • Its not working for me in IE10 on Win8 – jaypeagi Jan 14 '13 at 17:03
  • Similar CSS is, however working on my website. I'm trying to work out the differences. – jaypeagi Jan 14 '13 at 17:06

2 Answers2

21

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.

jaypeagi
  • 3,133
  • 18
  • 33
  • 3
    Nice find! Damn IE. I suppose I'll need to report this anyway. – Bram Vanroy Jan 14 '13 at 19:30
  • Nice find. This (combined with the workaround) is eerily similar to Chrome's issue with attribute selectors, except that affects Chrome on every platform. No idea if it's been fixed yet. – BoltClock Jan 15 '13 at 04:28
  • @BoltClock - alas because IE10 is WIn8 only, we don't know if its platform independent or not. – jaypeagi Jan 15 '13 at 14:24
  • @BramVanroy - I only found it because I knew it worked on my website and step by step made your CSS identical to mine! Yes, it does need reporting really - I agree. – jaypeagi Jan 15 '13 at 14:25
  • 2
    @jaypeagi Internet Explorer 10 is **not** just for Windows 8. It is currently available on Windows 7 too. – Sampson Jan 20 '13 at 14:17
  • @JonathanSampson it seems the preview is available on Win 7 but not the final release? – jaypeagi Jan 21 '13 at 09:20
  • 1
    @jaypeagi Correct, but it's sufficient to test against for now regarding issues like this. Microsoft is currently accepting bug reports for Internet Explorer 10 on Windows 7. – Sampson Jan 21 '13 at 20:40
0

I had an instance where this wasn't working in IE as well, When I switched the order of ":hover" and ":after" in my style sheet from

    .myclassname::after:hover

to

    .myclassname:hover::after

I was able to get the desired result, all the way back to IE9 (didn't test anything lower)

Suzie K
  • 11
  • 1