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

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 selector,因为它在IE中工作,如果您将鼠标悬停在祖先元素上,例如. div：hover p :: after – live demo：http://jsfiddle.net/SPHzj/14/.

然而,情况并非如此,因为IE确实能够理解该选择器.诀窍就是定义一个p：hover {}规则. (发现时间@maxw3st.)

p:hover {}

这个规则可以是空的.这个规则的存在将使IE10的过渡工作.

现场演示：http://jsfiddle.net/SPHzj/15/(也可在IE10中使用)

这里发生了什么？为什么IE要求该规则存在,以便转换工作在伪元素上？这应该是一个bug吗？

解决方法

似乎是一个回归

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

好奇地,我尝试过：活跃的伪类,这似乎按预期工作.进一步确定这是一个回归,您可以看到,通过将其更改为一个元素,转换将如预期的那样进行(从历史上看,a和：悬停在一起).

可选的工作

在这一点上我只能想到几个解决方案(等待这个修正)：

>使用空p：hover {}修复.
>修改您的标记以定位::在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标签具有通常期望的兄弟姐妹.很少有一个文档只包含一个段落标签.

我明白这些并不理想,但现在是一种手段.让我们希望在将来的Internet Explorer版本中看到这一点.

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

解决方法

相关文章