Question

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

因此，我注意到如果我将:hover选择器的display属性设置为none，则它在Chrome中没有明显的效果（第23版）。实际上，选择器中没有应用其他属性。好像整个选择器都被忽略了。

e.g。

<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，firefox）中那样快速切换（每帧或鼠标移动）。虽然我认为我更喜欢Chrome的实现，但我想知道为什么不应用其他属性（例如color:red）。

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

Answer 1

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

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

那你为什么不看闪烁？ Chrome会以如此快的速度呈现更改，您将看不到更改（或浏览器只是不呈现更改）。当您切换到visibility：hidden时，您会看到flickr，因为该项仍然在渲染树中，只是隐藏（加上，它更慢，渲染事件的触发次数要少得多）。

我想知道为什么不应用其他属性（例如颜色：红色）。

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

希望有所帮助！

Answer 2

我认为同时display:none和hover会导致浏览器混淆。它适用于visibility:hidden。

display:block;
visibility:hidden;
color:red;