为什么IE10需要存在ap:hover {}规则才能使转换工作在伪元素上？

Question

HTML:

<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选择器,因为它在IE中工作,如果你将悬停设置在祖先元素上,例如div:hover p::after- 现场演示:http://jsfiddle.net/SPHzj/14/.

但是,事实并非如此,因为IE确实能够理解选择器.诀窍是定义p:hover {}规则.(由@ maxw3st发现.)

p:hover {}

此规则可以为空.仅仅存在这一规则将使IE10中的过渡工作成为可能.

现场演示: http ://jsfiddle.net/SPHzj/15/(也适用于IE10)

这里发生了什么？为什么IE要求转换才能在伪元素上运行？这应该被视为一个错误吗？

Answer 1

这似乎是Internet Explorer 10中的合法回归.如MSDN所示,由于Internet Explorer 7用户已经能够定位任何元素的悬停状态,而不仅仅是a.

奇怪的是我尝试了:active伪类,这似乎按预期工作.进一步确定这是一个回归,您可以看到,通过将其更改为a元素,转换按预期进行(从历史角度来看,a并且:hover一起进行).

目前我只能想到几个解决方案(等待修复时):

第一个项目是您在问题中指定的项目,并且由于其简单性而非常有吸引力.实际上,您可以使用:hover{}并获得相同的结果(可能是最佳解决方案).

第二项也是可行的,但有点不太理想,因为它需要修改标记,这并不总是可行的,坦率地说,有点傻.

最后一个选项有点有趣.如果您将选择器修改为基于兄弟关系,它会神奇地再次开始工作.例如,假设我们在正文中有多个元素:

<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版本中看到这一点.

Answer 2

奇怪的是，该效果适用于 <a> 链接而不是段落标记。

这显然是 IE10 的错误或回归。幸运的是，您已经找到了一个很好的解决方法。