3

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

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

例如

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

...

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

（看看这个的jsFiddle）

显然，由于display:none不能悬停的元素，该元素立即不再被选择器选中:hover，因此失去了display:none属性（并再次有资格被选择）。

这条规则的自相矛盾让我想知道为什么（例如）该display属性不会像在其他浏览器（ie9、firefox）中那样快速切换（每一帧或鼠标移动）。虽然我认为我更喜欢 Chrome 的实现，但我想知道为什么color:red没有应用其他属性（例如 ）。

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

4

2 回答 2

4

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

在查看了悬停链接时发生的渲染事件之后，看起来 Chrome 确实在显示中渲染了这种变化（我最初认为 Chrome 出于性能原因忽略了它）。在 1.65 秒内，它捕获了 11360 次由于这种显示变化而重新计算样式和布局的事件。

那为什么你看不到闪烁呢？Chrome 正在以如此快的速度呈现更改，您将看不到更改（或者浏览器只是不呈现它）。当您切换到可见性：隐藏时，您会看到 flickr，因为该项目仍在渲染树中，只是隐藏（另外，它更慢，触发的渲染事件要少得多）。

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

它是级联的，所以 display: none 被应用，然后是红色。看不到悬停状态的原因与看不到颜色变化的原因相同。

希望有帮助！

于 2012-12-18T04:35:00.220 回答
0

我认为display:none同时hover也给浏览器造成了混乱。它适用于visibility:hidden虽然。

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

你可以在这里查看：http: //jsfiddle.net/MnZyx/2/

于 2012-12-18T04:18:47.650 回答