css - 矛盾的CSS规则 `.myClass:hover { display:none; }`没有效果

Question

序言:这是一个有点“学术”的问题。我正在寻找一个解释和智能猜想，而不是一个实际的解决方案(没有真正的问题需要“解决”)。

所以，我注意到，如果我将 :hover 选择器的 display 属性设置为 none，它在 Chrome 中没有明显的效果(v23)。事实上，选择器中没有应用其他属性。就好像整个选择器都被忽略了。

例如

<div class="myElement">Hover over this. Nothing happens!</div>

...

.myElement:hover {
  display:none;
  color:red;
}

(查看 jsFiddle of this )

显然，由于带有 display:none 的元素无法悬停，该元素立即不再被 :hover 选择器选中，因此丢失了 display:none 属性(并且再次有资格选择)。

这条规则的矛盾性质让我想知道为什么(例如)display属性不像其他浏览器(ie9、火狐浏览器)。虽然我认为我更喜欢 Chrome 的实现，但我想知道为什么不应用其他属性(例如 color:red)。

问题:Chrome 选择放弃这个愚蠢的选择器是否有一些官方记录的原因，或者这是某种错误？

Answer 1

The question: is there some official documented reason why Chrome chooses to bail on this silly selector, or is this some kind of bug?

查看悬停链接时发生的渲染事件后，Chrome 看起来实际上在显示中渲染了此更改(我最初认为 Chrome 出于性能原因而忽略了它)。在 1.65 秒内，它捕获了 11360 个由于显示变化而重新计算样式和布局的事件。

那为什么你看不到闪烁呢？ Chrome 渲染更改的速度如此之快，您将看不到更改(或者浏览器只是不渲染它)。当您切换到可见性:隐藏时，您会看到 flickr，因为该元素仍在渲染树中，只是隐藏(另外，它速度较慢，触发的渲染事件要少得多)。

I wonder why the other properties (e.g. color:red) aren't applied.

它是级联的，所以显示:没有应用，然后是红色。您从未看到悬停状态的原因与您看不到颜色变化的原因相同。

希望有帮助!