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

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 中的合理回归。如 on MSDN 所示，因为 Internet Explorer 7 用户已经能够定位任何元素的悬停状态，而不仅仅是a。

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

可选的解决方法

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

1. 使用空的 p:hover {} 修复。
2. 修改您的标记以针对 p 的子级上的 ::after。
3. 修改选择器以使用组合器。

第一项是您在问题中指定的内容，并且由于其简单性而非常有吸引力。事实上，您可以使用 :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 版本中看到这个问题得到解决。