1. ホーム
  2. css

[解決済み] How to get the cursor to change to the hand when hovering a <button> tag

2023-03-23 02:21:18

Question

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;
}

How to solved?

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;
}

これは、IDが "more"の要素にカーソルを適用します(1回のみ使用可能)。ですから、あなたの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" />