Question

请考虑以下事项：

.element {
    cursor: pointer;
}

.element:hover {
    cursor: pointer;
}

对我来说，这两个CSS代码段完全相同。仅在悬停元素时才能看到光标。装饰光标的方法同样适用。

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

Answer 1

我们在这里做一些分析。唯一的区别是hover伪元素，它以声明方式指示更改渲染以响应用户操作。

CSS3 spec中的游标属性说明包含以下内容：

此属性指定要为其显示的游标类型在元素的边框，填充和内容上方指向设备。

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

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

当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。

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

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

Answer 2

如我所见，你只需要：悬停，如果你想要更多的动作或不同的指针，而不是默认的鼠标悬停项目，如下所示：

.element.crosshair {
    cursor: crosshair;
}

.element.help {
    cursor: help;
}

.element.wait {
    cursor: wait;
}

Answer 3

根据表现的差异太小甚至不重要。

无论如何都只能看到一次光标。

Answer 4

我认为将光标样式应用于元素是最好的。

检查 this fiddle （最好使用Chrome执行此操作）。

每个按钮创建500,000个段落，它们之间没有间距：

JS:
function paragraphs(className) {
  var s= '';
  for(var i = 0 ; i < 500000 ; i++) {
    s+= '<p class="'+className+'"></p>';
  }
  document.querySelector('div').innerHTML= s;
}

CSS:
p {
 margin: 0;
}

第一个按钮将光标应用于元素，第二个按钮将其应用于悬停伪类。

在段落之间移动时，光标应不更改。但是，当样式应用于伪类时会发生。

将CSS推迟到更高性能：如果可能，将鼠标悬停？

4 个答案: