css - 将 CSS 延迟到 :hover if possible? 是否更高效

Question

考虑以下几点:

.element {
    cursor: pointer;
}

.element:hover {
    cursor: pointer;
}

对我来说，这两个 CSS 片段是相同的。光标仅在悬停元素时可见。两种装饰光标的方法都同样有效。

我很好奇它在幕后是如何工作的。这里有使用其中一个的偏好吗？如果是，为什么？

Answer 1

这里我们来分析一下。唯一的区别是 hover 伪元素，它以声明方式指示更改呈现以响应用户操作。

CSS3 spec中的游标属性描述包含以下内容:

This property specifies the type of cursor to be displayed for the pointing device when over the element's border, padding, and content.

这可以解释为修改光标作为对鼠标悬停事件的响应。

另一方面，CSS3 Spec 中的 :hover 伪选择器描述包含以下内容:

A visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.

这会将一整套属性应用于相关元素作为对鼠标悬停事件的响应，这可能意味着如果您在那里有一些其他属性，则可能需要重新绘制屏幕的某些部分，但由于您只是设置鼠标光标重绘不应该发生，因此对于您的特定示例，使用带有光标的悬停可以被视为语法过于复杂，因为它们的作用完全相同。

对于您的具体示例，应该没有任何显着的性能差异，因为在这两种情况下都会引发鼠标悬停事件，并且 native 代码中的事件处理程序会应用新光标。不会发生重绘。