悬停 <button> 标签时如何让光标变为手形

Posted 2023-03-06

【中文标题】悬停 <button> 标签时如何让光标变为手形

【英文标题】：How to get the cursor to change to the hand when hovering a <button> tag

【发布时间】：2012-02-04 10:33:53

【问题描述】：

查看我的网站时，<a> 标签的光标只会变为戴着手套的手，<button> 标签不会。这是有原因的吗？

这是我的代码（按钮标签在 css3 中的 id 为 #more）。

 #more 
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;

【问题讨论】：

有reasons 。如果你关注链接，还有历史。无需修改供应商设置的当前默认光标样式（如果您设计好的按钮并使用正确的元素，无论是 a 或 submit 或按钮）

【参考方案1】：

见： https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

所以你需要添加：cursor:pointer;

在你的情况下使用：

#more 
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;

这会将光标应用到 ID 为“more”的元素（只能使用一次）。所以在你的 html 中使用

<input type="button" id="more" />

如果您想将此应用于多个按钮，那么您有多种可能性：

使用类

.more 
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;

在你的 HTML 中使用

<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />

或应用于 html 上下文：

input[type=button] 
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;

在你的 HTML 中使用

<input type="button" value="first" />
<input type="button" value="second" />

【讨论】：

答案中的链接似乎已失效。

我认为链接应该是wiki.selfhtml.org/wiki/CSS/Eigenschaften/…，但我不确定。也许@Thomas 可以提供帮助？

所有选择按钮输入元素 (input[type=text]) 的选择器不正确。这应该是：input[type=button].

【参考方案2】：

只需添加这种样式：

cursor: pointer;

默认情况下它没有发生的原因是因为大多数浏览器只为链接保留指针（可能还有其他一些我忘记的事情，但通常不是<button>s）。

更多关于cursor属性：https://developer.mozilla.org/en/CSS/cursor

我通常默认将此应用于<button> 和<label>。

注意：我刚刚发现：

按钮标签的 id 为 #more

每个元素都有自己独特的id，这一点非常重要，你不能有重复。请改用class 属性，并将选择器从#more 更改为.more。这实际上是一个很常见的错误，它是这里提出的许多问题和问题的原因。越早学会使用id越好。

【讨论】：

作为一个完整的 HTML/css 菜鸟，必须查看下面的 Aashish 答案才能了解将光标放在哪里：指针

感谢您实际解释为什么默认情况下不添加它。提供更完整的答案。

【参考方案3】：

你只需要使用 CSS 的属性之一，即---->

光标：指针

只需在 css 中使用此属性，无论它是内联的还是内部的或外部的

例如（用于内联 css）

<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>

【参考方案4】：

 #more 
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    cursor: pointer;