如何在悬停< button >标签时让光标变成手

如何在悬停< button >标签时让光标变成手
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

当查看我的站点时，光标仅更改为<a>标签，不是<button>标签。这有什么原因吗？

下面是我的代码(在CSS 3中按钮标记的id为#more)。

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

提问于 2018-03-272018-03-27 07:00:52

用户回答回答于 2018-03-272018-03-27 15:36:55

所以你需要添加： 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" />

如果你想将它应用于多个按钮，那么你有不止一种可能性：

使用CLASS

.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" />

用户回答回答于 2018-03-272018-03-27 17:00:32

只需添加这种风格：

cursor: pointer;

它没有被默认发生的原因是因为大多数浏览器只保留链接指针（也许还有一些我忘记的东西，但通常不是<button>）。

我通常适用这<button>和<label>默认。

注意：我刚刚发现了这一点：

按钮标签有一个id #more

每个元素都有自己的独特性是非常重要的id，你不能有重复。class改为使用该属性，然后将选择器从更改#more为.more。这实际上是一个很常见的错误，这是很多问题和问题的原因。你越早学习如何使用id越好。