为什么IE10要求AP的存在：悬停{}规则转变到伪元素上工作？(Why does IE10 requ

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的工作）

正如你所看到的，我已经设置了CSS转换的::after段落的伪元素。然后，当一段盘旋，两款新申请被转变伪元素。

这在Firefox和Chrome，但不是在IE10。我的理由是，IE不理解p:hover::after如果您将悬停的祖先元素的选择，因为它在IE浏览器，如div:hover p::after -现场演示： HTTP：//的jsfiddle达网络/ 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去手牵手）。

可选的变通

只有少数的解决方案，我可以在此时想到的（在等待这是固定的）：

使用空p:hover {}修复。
修改您的标记来定位::after的的孩子p 。
修改使用组合算符的选择。

第一项是，你在你的问题指定的，而且是非常有吸引力给出它的简单性。事实上，你可以使用: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错误或回归。幸运的是，你已经找到了一个很好的修复。

Answer 3:

这同样的现象弹出，当我尝试添加一条规则，光标变成一个指针。然而，

 cursor: pointer;

已被列入伪的父，它不能被用来定位在IE10只是伪的内容字符串。

http://jsfiddle.net/maxw3st/SPHzj/22/使用一个div容器， http://jsfiddle.net/maxw3st/7sBVC/使用号码：悬停的解决方法。添加DIV被@simevidas建议，并为过渡，只是没有指针正常工作。指针似乎只当它被施加到伪元素的父出现在IE10。

文章来源: Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?