为啥 IE10 需要存在 p:hover 规则才能在伪元素上进行转换？

Posted 2023-03-05

【中文标题】为啥 IE10 需要存在 p:hover 规则才能在伪元素上进行转换？

【英文标题】：Why does IE10 require the presence of a p:hover rule for transitions to work on a pseudo element?为什么 IE10 需要存在 p:hover 规则才能在伪元素上进行转换？

【发布时间】：2013-04-07 13:53:20

【问题描述】：

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 要求存在该规则才能使过渡对伪元素起作用？这应该被认为是一个错误吗？

【参考方案1】：

似乎是回归

这似乎是 Internet Explorer 10 中的合法回归。如 on MSDN 所示，因为 Internet Explorer 7 用户已经能够定位 any 元素的悬停状态，而不仅仅是 @ 987654324@.

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

可选的解决方法

目前我只能想到几个解决方案（在等待解决此问题时）：

使用空的p:hover 修复。 修改您的标记以将::after 定位到p 的子级。 修改选择器以使用组合符。

第一项是您在问题中指定的内容，鉴于其简单性，非常有吸引力。事实上，您可以使用 :hover 并获得相同的结果 (probably the best solution)。

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

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

<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 版本中解决这个问题。

【讨论】：

p+p:hover::after 确实有效 (jsfiddle.net/SPHzj/21)。这越来越荒谬了-.-

@ŠimeVidas 这就是行业的运作方式；在 26 版之前，您甚至无法在 Chrome 中为伪元素设置动画。多年来，这完全是另一个烦恼 :) 关于 IE，您还可以使用通用选择器 *~.className:hover::after 来抓取目标元素。

这不仅在 IE11 中得到修复，而且显然在 IE11 的 MSHTML10 仿真中也无法重现。

【参考方案2】：

奇怪的是，效果会在 链接而不是段落标签上起作用。

这显然是一个 IE10 错误或回归。幸运的是，您找到了一个不错的解决方案。

【讨论】：

我可以确认这一点 (jsfiddle.net/SPHzj/18)。虽然没有回答我的问题。因此，应该是评论，而不是答案。

【参考方案3】：

当我尝试添加规则以将光标更改为指针时，也会出现同样的现象。不过，

cursor: pointer;

必须包含在伪的父级中，它不能用于仅针对 IE10 中伪的内容字符串。

http://jsfiddle.net/maxw3st/SPHzj/22/ 使用 div 作为容器，http://jsfiddle.net/maxw3st/7sBVC/ 使用 p:hover 解决方法。 @simevidas 建议添加 div，并且对于过渡效果很好，只是不适用于指针。当指针应用于伪元素的父级时，指针似乎只出现在 IE10 中。