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

前端之家收集整理的这篇文章主要介绍了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版本中看到这一点.

原文链接:https://www.f2er.com/css/214499.html

猜你在找的CSS相关文章