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

Question

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

.class {
    cursor:pointer;
}

.class:hover {
    cursor:pointer;
}

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

Answer 1

这两个选择器用于明显不同的目的,尽管事实上 - 至少在实践中它们似乎完成了同样的事情.

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

1. 它使得在较大的CSS块中查找和理解您的样式更加明显

2. 它使用一个专门指定的选择器(可能会在以后的规范中扩展,您的功能会发生什么？)

3. 如果您稍后添加到默认样式,.class您的状态将明确分开

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

5. 如果你有更复杂的CSS,你可能会在:hover其他地方使用它,所以应该使用它来保持一致性

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

但是请等一下......你可能会注意到,如果你为一个a元素设置了光标样式,default那么通常的手形图标就不会出现在悬停上......这表明有一些预先存在的证据表明没有特定的样式:hover状态(参见这在行动中)

总之,.class在某些情况下没有游戏破坏的理由 - 它肯定会使用更少的字节,如果你有一个相当简单的设置,那么只有你在开发...然后为什么不,但要小心它可能是最好的如果你想遵守严格的规则并更好地支持持续发展,就要避免.

此外..小时不要忘记触摸屏设备 MDN在这里提出了重点

在触摸屏上:悬停是有问题的或不可能的.:hover伪类从不匹配,或在触摸元素后短时间匹配.由于触摸屏设备非常常见,因此对于Web开发人员来说,只有在将鼠标悬停在其上时才能访问内容非常重要,因为这些内容对于此类设备的用户是隐藏的.

因此,根据您的要求,使用它可能不是最好使用:hover,就像您在CSS中使用触摸屏设备一样,它可能会依赖于不受支持或无聊的功能.