问题
When viewing my site, the cursor only changes to the gloved hand for <a>
tags, not <button>
tags. Is there a reason for this?
Here is my code (the button tags have an id of #more in css3).
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
}
回答1:
see: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
so you need to add: 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
<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
<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />
or apply to a html context:
input[type=button] {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
and in your HTML use
<input type="button" value="first" />
<input type="button" value="second" />
回答2:
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).
More on the cursor
property: https://developer.mozilla.org/en/CSS/cursor
I usually apply this to <button>
and <label>
by default.
NOTE: I just caught this:
the button tags have an id of
#more
It's very important that each element has it's own unique id
, you cannot have duplicates. Use the class
attribute instead, and change your selector from #more
to .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.
回答3:
All u need is just use one of the attribute of CSS , which is---->
cursor:pointer
just use this property in css , no matter its inline or internal or external
for example(for inline 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;
}
来源:https://stackoverflow.com/questions/8762201/how-to-get-the-cursor-to-change-to-the-hand-when-hovering-a-button-tag