css - 'cursor' 属性应该在 '.class' 还是 '.class:hover' 中定义？

Question

由于以下两者具有相同的效果:

.class {
    cursor:pointer;
}

.class:hover {
    cursor:pointer;
}

关于最佳实践，您应该使用哪一个，为什么？

Answer 1

这两个选择器用于截然不同的目的，尽管事实上 - 至少在实践中它们看起来完成相同的事情。

我倾向于说使用 :hover 定义悬停状态是最佳实践(至少在非触摸屏设备上) ，见下文)，因为:

1. 它使在较大的 CSS block 中更容易找到和理解您的样式

2. 它利用了一个专门指定的选择器(以后可能会在规范中进行扩展，那么您的功能会发生什么变化？)

3. 如果您稍后添加到 .class 的默认样式，您的状态将被清楚地适当分隔

4. 如果您将 CSS 的责任移交给另一个人会怎样？在正确的选择器下定义 :hover 特定功能使理解代码变得更加容易。

5. 如果您有更复杂的 CSS，您可能会在别处使用 :hover，因此应出于一致性目的使用它

6. 这两个选择器代表相同的元素，但处于不同的状态，语义上你应该使用:hover

但请稍等..您可能会注意到，如果将 a 元素的光标样式设置为 default，那么通常手形图标不会出现在悬停时...这表明有预先确定的证据表明没有专门设计 :hover 状态 ( see this in action here )

总而言之，在某些情况下，没有理由不简单地使用 .class - 它肯定使用更少的字节，如果你有一个相当简单的设置，那么只在你的开发中...... .那为什么不呢，但要小心，如果您想遵守严格的规则并更好地支持正在进行的开发，最好避免这样做。

另外..别忘了触摸屏设备 MDN makes an important point here

on touch screens :hover is problematic or impossible. The :hover pseudo-class never matches, or matches for a short moment after touching an element. As touchscreen devices are very common, it is important for web developer not to have content accessible only when hovering over it, as this content would be hidden for users of such devices.

因此，根据您的要求，可能不最好使用 :hover 就好像您在 CSS 中为触摸屏设备使用它一样依赖不受支持或不稳定的功能。