web-dev-qa-db-ja.com

<button>タグをホバーするときにカーソルを手に変える方法

サイトを表示しているとき、カーソルは<a>タグではなく、<button>タグ。これには理由がありますか？

コードは次のとおりです（ボタンタグのIDはcss3で#moreです）。

 #more {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
}
cssmouse-cursor
48
Matt Murphy

参照： https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

追加する必要があります：cursor:pointer;

あなたの場合に使用：

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

これにより、「more」というIDを持つ要素にカーソルが適用されます（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" />
67
Thomas

このスタイルを追加するだけです：

cursor: pointer;

デフォルトで発生しない理由は、ほとんどのブラウザーがリンク専用のポインターを予約しているためです（そして、おそらく忘れてしまっている他のいくつかのことですが、通常<button>sではありません）。

cursorプロパティの詳細： https://developer.mozilla.org/en/CSS/cursor

通常、これをデフォルトで<button>および<label>に適用します。

[〜＃〜] note [〜＃〜]：私はこれを見つけました：

ボタンタグのIDは#moreです

各要素に固有のidがあることが非常に重要です。重複することはできません。代わりにclass属性を使用し、セレクターを#moreから.moreに変更します。これは実際には非常によくある間違いであり、ここで尋ねられる多くの問題と質問の原因です。 idの使用方法を早く習得すればするほどよいでしょう。

20
Wesley Murch

必要なのは、CSSの属性の1つを使用するだけです。

カーソル：ポインター

インラインまたは内部または外部に関係なく、CSSでこのプロパティを使用するだけです

例（インラインcssの場合）

<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>
6
Aashish
 #more {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    cursor: pointer;
}
3
Lem Lordje Ko