Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h3>Appears to be a Regression</h3> <p>This does appear to be a legitimate regression in Internet Explorer 10. As indicated <a href="http://msdn.microsoft.com/en-us/library/ie/cc848866%28v=vs.85%29.aspx" rel="nofollow">on MSDN</a>, since Internet Explorer 7 users have been able to target the hover state of <em>any</em> element , and not only <code>a</code>.</p> <p>Curiously I tried the <code>:active</code> pseudo-class, and this appears to work as expected. Further establishing that this is a regression, you can see that by changing this to an <code>a</code> element, the transition takes place as expected (since historically, <code>a</code> and <code>:hover</code> go hand-in-hand).</p> <h3>Optional Work-Arounds</h3> <p>There are only a few solutions that I can think of at this point (while waiting for this to be fixed):</p> <ol> <li>Use the empty <code>p:hover {}</code> fix.</li> <li>Modify your markup to target <code>::after</code> on a child of the <code>p</code>.</li> <li>Modify the selector to use combinators.</li> </ol> <p>The first item is that which you specified in your question, and is very attractive given its simplicity. In fact, you could use <code>:hover{}</code> and get the same results (<a href="http://sampsonblog.com/525/ie10-gotcha-animating-pseudo-elements-on-hover" rel="nofollow">probably the best solution</a>).</p> <p>The second item is also <em>do-able</em>, but a little less desirable since it requires modifying the markup, which is not always possible, and to be frank, a bit silly.</p> <p>The last option is somewhat interesting. If you modify the selector to be based on sibling relationships, it magically begins to work again. For instance, suppose we have multiple elements in the body:</p> <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Hello, World&lt;/h1&gt; &lt;p&gt;This is my first paragraph. it does not animate.&lt;/p&gt; &lt;p&gt;This animates, with a pseudo-element.&lt;/p&gt; </code></pre> <p>We can now use combinators to target the second paragraph:</p> <pre class="lang-css prettyprint-override"><code>p+p:hover::after {} </code></pre> <p>This selector will match any paragraph following a paragraph though, which isn't desirable. At this point we could consider <code>:nth-child</code>, or <code>:nth-of-type</code> to further specify which paragraph we want, even using the general sibling combinator:</p> <pre class="lang-css prettyprint-override"><code>h1~p:nth-of-type(2):hover::after {} /* Targets second &lt;p&gt; nearest &lt;h1&gt; */ </code></pre> <p>But more ideally we would target with a class:</p> <pre class="lang-css prettyprint-override"><code>h1~.hoverme:hover::after {} /* Targets &lt;p class="hoverme"&gt; */ </code></pre> <h3>A Two-Char Solution?</h3> <p>One step further, maybe you don't want to be locked down explicitly providing a general sibling tag. You could also use the Universal Selector:</p> <pre class="lang-css prettyprint-override"><code>*~.hoverme:hover::after {} /* Targets &lt;p class="hoverme"&gt; among siblings */ </code></pre> <p>This requires that the <code>p</code> tag have siblings, which is typically expected. Very rarely does a document consist of nothing more than a single paragraph tag.</p> <p>I understand that these aren't ideal, but they are a means to an end for now. Let's hope to see this resolved in future releases of Internet Explorer.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload