<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)
你可以看到,我已经在段落的:: after伪元素上设置了CSS转换.然后,当段落被悬停时,两个新的样式适用于被转换的伪元素.
这可以在Firefox和Chrome中使用,但不能在IE10中使用.我的推理是,IE不明白p：hover :: after selector,因为它在IE中工作,如果您将鼠标悬停在祖先元素上,例如. div：hover p :: after – live demo：http://jsfiddle.net/SPHzj/14/.
然而,情况并非如此,因为IE确实能够理解该选择器.诀窍就是定义一个p：hover {}规则. (发现时间@maxw3st.)
p:hover {}
这个规则可以是空的.这个规则的存在将使IE10的过渡工作.
现场演示：http://jsfiddle.net/SPHzj/15/(也可在IE10中使用)
这里发生了什么？为什么IE要求该规则存在,以便转换工作在伪元素上？这应该是一个bug吗？
解决方法
这似乎是Internet Explorer 10中的合法回归.如on MSDN所示,因为Internet Explorer 7用户已经能够定位任何元素的悬停状态,而不仅仅是a.
好奇地,我尝试过：活跃的伪类,这似乎按预期工作.进一步确定这是一个回归,您可以看到,通过将其更改为一个元素,转换将如预期的那样进行(从历史上看,a和：悬停在一起).
可选的工作
在这一点上我只能想到几个解决方案(等待这个修正)：
>使用空p：hover {}修复.
>修改您的标记以定位::在p的孩子之后.
>修改选择器以使用组合器.
第一个项目是您在问题中指定的项目,并且由于其简单性而非常有吸引力.实际上,您可以使用：hover {}并获得相同的结果(probably the best solution).
第二个项目也是可行的,但有点不太可取,因为它需要修改标记,这并不总是可能的,坦白说,有点愚蠢.
最后一个选择有点有趣.如果您将选择器修改为基于兄弟关系,则它会神奇地开始工作.例如,假设我们在主体中有多个元素：
<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"> */
双焦点解决方案？
一步一步,也许你不想被锁定明确提供一般的兄弟标签.您也可以使用通用选择器：
*~.hoverme:hover::after {} /* Targets <p class="hoverme"> among siblings */
这要求p标签具有通常期望的兄弟姐妹.很少有一个文档只包含一个段落标签.
我明白这些并不理想,但现在是一种手段.让我们希望在将来的Internet Explorer版本中看到这一点.
