为什么IE10需要存在p：hover {}规则，以便在伪元素上进行转换？ [英] Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?

问题描述

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需要存在这个规则，以便转换在伪元素上工作？

解决方案

似乎是回归

这在Internet Explorer 10中似乎是一个合法的回归。如，因为Internet Explorer 7用户已经能够定位任何元素的悬浮状态，而不仅仅是 a 。

好奇地，我尝试了：active 伪类，如预期。进一步确定这是一个回归，你可以看到，通过将它改为一个 a 元素，转换会按预期进行（因为历史上， a 和：hover 手拉手）。

可选的工作

这里只有几个解决方案（等待修复）：

1. 使用空白<​​code> p：hover {} 修复。


2. 将您的标记修改为目标


3. 修改选择器。 ::




第一个项目是您在问题中指定的项目，并且由于其简单性而非常有吸引力。事实上，你可以使用：hover {} 并获得相同的结果（



第二个项目也是可执行的




最后一个选项是最后一个选项，因为它需要修改标记，这并不总是可能的，有点有趣。如果您将选择器修改为基于同级关系，它将神奇地开始重新工作。例如，假设我们在正文中有多个元素：

 < h1> Hello，World< ; / h1> 
< p>这是我的第一段。它不会生成动画。< / p> 
< p>这个动画有一个伪元素。< / p> 
  

现在我们可以使用组合器来定位第二段：

  p + p：hover :: after {} 
  

此选择器将匹配段落后的任何段落，但这是不可取的。在这一点上，我们可以考虑：nth-​​child 或：nth-​​of-type 即使使用一般的同级组合器：

  h1〜p：nth-​​of-type 2）：hover :: after {} / *定位第二个< p>最近的< h1>但是更理想的情况是我们用一个类作为目标：
 
 $ / 
 
 
  h1〜.hoverme：hover :: after {} / * Targets< p class =hoverme> * / 
  
 
 
 
一个双字符解决方案？
 
 
 
进一步，也许你不想被锁定明确提供一个同级的标签。您也可以使用通用选择器：
  *〜.hoverme：hover :: after {} / * Targets< p class =hoverme>兄弟姐妹之间* / 
  
这需要 p 标签有兄弟姐妹，这通常是预期的。很少有一个文档只包含一个单独的段落标签。
 
 
 
我知道这些不是理想的，但它们是现在结束的手段。我们希望在未来的Internet Explorer版本中能够解决此问题。
 
HTML:
<p>Hover</p>
CSS:
p::after {
    content: " here";
    transition: all 1s;
}

p:hover::after {
    font-size: 200%;
    color: red;
}
Live demo: http://jsfiddle.net/SPHzj/13/ (works in Firefox and Chrome)

As you can see, I've set up CSS transitions on the ::after pseudo-element of the paragraph. Then, when the paragraph is hovered, two new styles apply for the pseudo-element which are transitioned.

This works in Firefox and Chrome, but not in IE10. My reasoning was that IE doesn't understand the p:hover::after selector, as it works in IE if you set the hover on an ancestor element, e.g. div:hover p::after - live demo: http://jsfiddle.net/SPHzj/14/.

However, this is not the case, as IE is indeed able to understand that selector. The trick is to define a p:hover {} rule as well. (Discovered by @maxw3st.) 
p:hover {}
This rule can be empty. The mere presence of this rule will make the transitioning work in IE10. 

Live demo: http://jsfiddle.net/SPHzj/15/ (also works in IE10)

What's going on here? Why does IE require that rule to be present in order for transitions to work on the pseudo-element? Should this be considered a bug?
解决方案
Appears to be a Regression

This does appear to be a legitimate regression in Internet Explorer 10. As indicated on MSDN, since Internet Explorer 7 users have been able to target the hover state of any element , and not only a.

Curiously I tried the :active pseudo-class, and this appears to work as expected. Further establishing that this is a regression, you can see that by changing this to an a element, the transition takes place as expected (since historically, a and :hover go hand-in-hand).

Optional Work-Arounds

There are only a few solutions that I can think of at this point (while waiting for this to be fixed):

Use the empty p:hover {} fix.
Modify your markup to target ::after on a child of the p.
Modify the selector to use combinators.
The first item is that which you specified in your question, and is very attractive given its simplicity. In fact, you could use :hover{} and get the same results (probably the best solution).

The second item is also do-able, but a little less desirable since it requires modifying the markup, which is not always possible, and to be frank, a bit silly.

The last option is somewhat interesting. If you modify the selector to be based on sibling relationships, it magically begins to work again. For instance, suppose we have multiple elements in the body:
<h1>Hello, World</h1>
<p>This is my first paragraph. it does not animate.</p>
<p>This animates, with a pseudo-element.</p>
We can now use combinators to target the second paragraph:
p+p:hover::after {}
This selector will match any paragraph following a paragraph though, which isn't desirable. At this point we could consider :nth-child, or :nth-of-type to further specify which paragraph we want, even using the general sibling combinator:
h1~p:nth-of-type(2):hover::after {} /* Targets second <p> nearest <h1> */
But more ideally we would target with a class:
h1~.hoverme:hover::after {} /* Targets <p class="hoverme"> */


A Two-Char Solution?

One step further, maybe you don't want to be locked down explicitly providing a general sibling tag. You could also use the Universal Selector:
*~.hoverme:hover::after {} /* Targets <p class="hoverme"> among siblings */
This requires that the p tag have siblings, which is typically expected. Very rarely does a document consist of nothing more than a single paragraph tag.

I understand that these aren't ideal, but they are a means to an end for now. Let's hope to see this resolved in future releases of Internet Explorer.

                        
这篇关于为什么IE10需要存在p：hover {}规则，以便在伪元素上进行转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！