web-dev-qa-db-ja.com

カーソルを指の形に変える

これはaですが、カーソルが通常のリンクのようにfingerに変わるように "onmouseover"に挿入する必要があることはわかりません。

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

私は私が置く必要があるどこかを読みました：

onmouseover="cursor: hand (a pointing hand)"

しかし、それは私のために働いていません。

さらに、これがJavaScript、CSS、または単なるHTMLのいずれであると考えられるのかわからない。

htmlcssmouseevent
198
Dvir Levy
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

それはCSSです。

あるいはスタイルシートで：

a.menu_links { cursor: pointer; }
413
Scott

あなたはCSSでこれを行うことができます：

a.menu_links {
    cursor: pointer;
}

これは実際にはリンクのデフォルトの動作です。 CSSのどこかでそれをオーバーライドするか、そこにhref属性がないかのどちらかでなければなりません（あなたの例にはありません）。

47
Joseph Silber

ページにリンクが1つしかない場合は、これを使用します。

onMouseOver="this.style.cursor='pointer'"
20
fooschnikens

cSSで書く

a.menu_links:hover{ cursor:pointer}
8
Mandeep Pasbola

あなたがこれでもう少し努力したいならば、これはクールな何かです。 URLには、リンクを使用することも、画像PNGを保存してパスを使用することもできます。例えば：

url（ 'assets/imgs/theGoods.png'）;

以下はそのコードです。

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

したがって、これはサイズが128 x 128以下の場合にのみ機能します。これより大きいサイズでもイメージはロードされません。しかし、あなたは実質的にあなたが望むどんな画像でも使うことができます！これは純粋なcss3といくつかのhtmlを検討するでしょう。 htmlでやらなければいけないことは

<div class='cursor'></div>

そのdivでのみ、そのカーソルが表示されます。だから私は通常ボディタグにそれを追加します。

7
Michael Barreiro

私は、プログラム的に正確ではあるが、上記の「最良の答え」は実際には提起された質問に答えないと思う。この質問は、mouseoverイベントでポインタを変更する方法を尋ねます。どこかにエラーがある可能性があるという投稿が、質問に答えていないのですが。受け入れられた回答では、mouseoverイベントは空白（onmouseover=""）であり、代わりにstyleオプションが含まれています。なぜこれが行われたのか分からない。

照会者のリンクに問題はないかもしれません。次のHTMLを検討してください。

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

ユーザーのリンクがこのリンク上にあるときは、ポインタは手の形に変わりません。代わりに、ポインタは通常のテキストの上にあるように動作します。これを望んでいないかもしれません…そしてマウスポインタを変えるように指示する必要があります。

求められている答えはこれです（これは他の人が投稿したものです）。

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

しかし、これは...あなたがこれらのものをたくさん持っているか、あちこちでこの種のことを使用して、何らかの変更を加えるかまたはバグにぶつかることにした場合、悪夢です。そのためのCSSクラスを作るほうが良いでしょう。

a.lendhand {
  cursor: pointer;
}

その後：

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

他にもこの方法よりも優れた方法がたくさんあります。 _ div _ s、 _ button _ s、 _ img _ sなどの方が便利かもしれません。 <a>...</a>を使っても害はありません。

ジャレット。

5
Jarett Lloyd

ナビゲーションを引き起こさないようにするためにイベントハンドラ内でhref属性を追加して有効なリンク＆return false;にします。

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

（あるいはdisplayData()がfalseと..="return displayData(..を返すようにする）

4
Alex K.

最良のものとしてマークされた答えで述べられているように純粋なCSSによる解決策はこの状況には適していません。

このトピックの例は通常の静的なhref属性を持たず、JSのみを呼び出しているので、JSなしでは何もしません。

そのため、JSでのみポインタをオンにするのが良いでしょう。だから、解決策

onMouseOver="this.style.cursor='pointer'"

上記のように（しかし、私はそこにコメントすることはできません）このケースでは最良のものです。 （ただし、一般的に、JSを要求しない通常のリンクの場合は、JSを使用せずに純粋なCSSを使用する方が適切です。）

2
Martin Adámek