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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

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

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

 #more {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
}
提问于
用户回答回答于

请参阅:https//developer.mozilla.org/de/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" />

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

使用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" />
用户回答回答于

只需添加这种风格:

cursor: pointer;

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

更多信息请访问cursorhttps//developer.mozilla.org/en/CSS/cursor

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

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

按钮标签有一个id #more

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

扫码关注云+社区