css - 为什么IE10要求存在p :hover {} rule for transitions to work on a pseudo element?

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选择器，因为如果您将鼠标悬停在祖先元素(例如， div:hover p::after-现场演示:http://jsfiddle.net/SPHzj/14/。

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

p:hover {}

此规则可以为空。仅此规则的存在将使IE10中的过渡工作。

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

这里发生了什么？ IE为什么要求该规则存在才能使转换在伪元素上起作用？应该认为这是一个错误吗？

最佳答案

似乎是回归

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

奇怪的是，我尝试了:active伪类，这似乎按预期工作。进一步确定这是一个回归，您可以看到通过将其更改为a元素，可以按预期进行转换(因为历史上，a和:hover齐头并进)。

可选的工作环境

目前，我只能想到几种解决方案(在等待解决此问题时):

使用空的p:hover {}修复程序。

修改您的标记，以将::after定位在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标记具有 sibling ，这是通常所期望的。文档很少只包含一个段落标签。

我知道这些方法并不理想，但是目前它们只是达到目的的一种手段。我们希望在Internet Explorer的将来版本中看到此问题的解决。

关于css - 为什么IE10要求存在p :hover {} rule for transitions to work on a pseudo element?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16015371/