10

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

4

3 回答 3

5

似乎是一种回归

这似乎是 Internet Explorer 10 中的一个合法回归。正如MSDN 上所指出的，由于 Internet Explorer 7 用户已经能够定位任何元素的悬停状态，而不仅仅是a.

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

可选的解决方法

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

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

第一项是您在问题中指定的内容，鉴于其简单性，非常有吸引力。事实上，您可以使用:hover{}并获得相同的结果（可能是最好的解决方案）。

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

最后一个选项有点有趣。如果您将选择器修改为基于兄弟关系，它会神奇地再次开始工作。例如，假设我们在 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 的未来版本中看到这个问题得到解决。

于 2013-04-15T14:04:30.253 回答
2

奇怪的是，效果将作用于 <a> 链接而不是段落标记。

它肯定看起来是一个 IE10 错误或回归。幸运的是，您找到了一个不错的解决方案。

于 2013-04-15T13:12:28.617 回答
0

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

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

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

于 2013-04-15T15:11:42.933 回答