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 正在以如此快的速度呈现更改，您将看不到更改(或者浏览器只是不呈现它)。当您切换到 visibility: hidden 时，您会看到 flickr，因为该元素仍在渲染树中，只是隐藏了(另外，它更慢，触发的渲染事件少得多)。

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

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

希望对您有所帮助!