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

时间：2014-03-19 11:29:31

标签： css css-selectors

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

.class {
    cursor:pointer;
}

.class:hover {
    cursor:pointer;
}

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

3 个答案:

答案 0 :(得分：7)

这两个选择器用于明显不同的目的，尽管事实上 - 至少在实践中它们出现来完成同样的事情。

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

  1. 它可以在较大的CSS块

    2. 中更明显地查找和理解您的样式

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

  3. 如果您稍后添加.class的默认样式，则您的状态会明确分开

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

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

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

    7. 但请等一下...... 您可能会注意到，如果您将a元素的光标样式设置为default，则通常的手形图标不会出现在悬停中...这表明存在未经特定样式:hover状态（see this in action here）的先行证据

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

    此外..小时不要忘记触摸屏设备 MDN makes an important point here

      触摸屏上的

    ：悬停是有问题的或不可能的。 ：悬停   伪类永远不会匹配，或者在短时间后匹配   触摸一个元素。由于触摸屏设备很常见，所以它是   对于Web开发人员来说，重要的是不要仅在以下时才能访   将鼠标悬停在其上，因为这些内容会被隐藏   设备

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

答案 1 :(得分：1)

IE6和更低版本仅识别:hover标记上的a伪类。 :hover或其他标记上的div将不会被这些浏览器解释。

如果要考虑兼容性，请使用:hover否则我认为没有区别。

答案 2 :(得分：0)

首先，对于你的＆＃34;相同的效果＆＃34;，这取决于你适用于什么。 因为默认情况下某些元素有＆＃34; cursor：pointer＆＃34;属性如

  

锚标记

默认情况下，以下元素具有＆＃34; cursor：default＆＃34;（无指针）

  

输入类型：提交

请访问stackoverflow.com＆＃34;发表您的答案＆＃34;例如，它是一个提交按钮，带有＆＃34; cursor：default＆＃34;默认情况下，用户的感知可能会认为可点击的对象正在显示＆＃34;指针＆＃34;，因此它的样式为＆＃34;光标：指针＆＃34;

作为我的经验的快速结论，没有最佳实践，而是取决于目的。对于可点击的对象，但它不显示为＆＃34;指针＆＃34;默认情况下，您可以使用＆＃34;指针＆＃34;来设置它们的样式。 当您禁用某些内容时，例如，当您激活某些内容然后启用锚链接时，您可以使用类似

的内容 
/* the a is only for illustrative purpose */
a.disabled{
   cursor: default;
}

a.enabled{
   cursor: pointer;
}

因为光标是视觉呈现的问题，与用户体验设计（UX）有关。

相关问题
最新问题