CSS 悬停 <button> 标签时如何使光标变为手形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8762201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the cursor to change to the hand when hovering a <button> tag
提问by Matt Murphy
When viewing my site, the cursor only changes to the gloved hand for <a>tags, not <button>tags. Is there a reason for this?
在查看我的网站时，光标只会变为<a>标签的戴手套的手，而不是<button>标签。是否有一个原因？
Here is my code (the button tags have an id of #more in css3).
这是我的代码（按钮标签在 css3 中的 id 为 #more）。
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
}
回答by Thomas
see: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
请参阅：https: //developer.mozilla.org/en-US/docs/Web/CSS/cursor
so you need to add: cursor:pointer;
所以你需要添加： cursor:pointer;
In your case use:
在你的情况下使用：
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
This will apply the curser to the element with the ID "more" (can be only used once). So in your HTML use
这会将光标应用于 ID 为“more”的元素（只能使用一次）。所以在你的 HTML 中使用
<input type="button" id="more" />
If you want to apply this to more than one button then you have more than one possibility:
如果您想将此应用于多个按钮，那么您有不止一种可能性：
using CLASS
使用类
.more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
and in your HTML use
并在您的 HTML 中使用
<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />
or apply to a html context:
或应用于 html 上下文：
input[type=button] {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
and in your HTML use
并在您的 HTML 中使用
<input type="button" value="first" />
<input type="button" value="second" />
回答by Wesley Murch
Just add this style:
只需添加此样式：
cursor: pointer;
The reason it's not happening by default is because most browsers reserve the pointer for links only (and maybe a couple other things I'm forgetting, but typically not <button>s).
默认情况下它不会发生的原因是因为大多数浏览器只为链接保留指针（也许还有其他一些我忘记的事情，但通常不是<button>s）。
More on the cursorproperty: https://developer.mozilla.org/en/CSS/cursor
有关该cursor属性的更多信息：https: //developer.mozilla.org/en/CSS/cursor
I usually apply this to <button>and <label>by default.
我通常适用这<button>和<label>默认。
NOTE: I just caught this:
注意：我刚刚抓住了这个：
the button tags have an id of
#more
按钮标签的 id 为
#more
It's very important that each element has it's own unique id, you cannot have duplicates. Use the classattribute instead, and change your selector from #moreto .more. This is actually quite a common mistake that is the cause of many problems and questions asked here. The earlier you learn how to use id, the better.
每个元素都有自己的唯一性非常重要id，您不能有重复项。改用该class属性，并将选择器从 更改#more为.more。这实际上是一个很常见的错误，它是导致这里提出的许多问题和问题的原因。越早学会使用id越好。
回答by Aashish
All u need is just use one of the attribute of CSS , which is---->
您只需要使用 CSS 的一个属性，即---->
cursor:pointer
游标：指针
just use this property in css , no matter its inline or internal or external
只需在 css 中使用此属性，无论其内联或内部或外部
for example(for inline css)
例如（对于内联 css）
<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>
回答by Lem Lordje Ko
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor: pointer;
}
