是否应该在带有或不带有 :hover 伪类的规则中设置游标属性？

Posted 2023-02-24

【中文标题】是否应该在带有或不带有 :hover 伪类的规则中设置游标属性？

【英文标题】：Should the cursor property be set in a rule with or without the :hover pseudo-class?

【发布时间】：2011-07-17 22:42:54

【问题描述】：

假设你或我编写了一个 html 元素...

<a id='hydrogen' href='#'>H</a>

...还有一些:hover CSS...

#hydrogen:hover 
  background:red;

...现在我们想在悬停时放置一个花哨的手形光标。有两种选择：

应用于无状态元素：

#hydrogen  
  cursor:pointer;

或者，应用于 :hover 状态。

#hydrogen:hover  
  color:red;
  cursor:pointer;

我的问题：有没有任何理由为什么一种方法比另一种方法更好？

...还是番茄，番茄？

【参考方案1】：

兼容性：IE6 及以下版本只能识别a 元素上的:hover 伪类。

【参考方案2】：

它们都是一样的，只要你总是想要pointer，不用担心悬停。

:hover 伪类will inherit cursor: pointer from its non hovered state。

我宁愿把它放在普通选择器上，而不是:hover。

【讨论】：

非悬停状态不是由缺少:hover 伪类来表示，而是由:not(:hover) 明确表示。这就是问题称之为“无状态”的原因，也是应用该样式的原因。

【参考方案3】：

两种方式都一样好。但是，如果元素不是锚点，我会将它放在 id 本身上，因为 :hover 不适用于 ie6 或更低版本。如果你不关心旧版本的 IE。那么这两种方式都是正确的。