リストがあり、そのアイテムのクリック ハンドラーがあります。
<ul>
<li>foo</li>
<li>goo</li>
</ul>
マウス ポインタをハンド ポインタに変更するにはどうすればよいですか (ボタンの上にカーソルを置いたときなど)。現在、リスト項目にカーソルを合わせると、ポインターがテキスト選択ポインターに変わります。
2292086 次
25 に答える
3609
人々が言及したように、時間の経過に照らして、安全に使用できるようになりました：
li { cursor: pointer; }
于 2010-06-21T19:50:20.947 に答える
174
これには jQuery は必要ありません。次の CSS コンテンツを使用するだけです。
li {cursor: pointer}
そしてほら！ハンディ。
于 2010-06-21T19:47:29.150 に答える
80
于 2013-01-07T11:50:38.627 に答える
46
使用する
cursor: pointer;
cursor: hand;
クロスブラウザの結果が欲しいなら！
于 2011-10-27T07:34:15.840 に答える
43
CSS:
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
カーソルを画像にすることもできます。
.img-cur {
cursor: url(images/cursor.png), auto;
}
于 2014-09-11T07:51:40.390 に答える
22
JavaScript が使用可能な場合は、ハンド/ポインター カーソルのみを表示するのが賢明だと思います。そのため、クリックできないものをクリックできるという感覚はありません。
これを実現するには、JavaScript ライブラリ jQuery を使用して CSS を要素に追加します。
$("li").css({"cursor":"pointer"});
または、クリック ハンドラに直接チェーンします。
または、modernizerを と組み合わせて<html class="no-js">使用すると、CSS は次のようになります。
.js li { cursor: pointer; }
于 2014-03-02T12:40:38.977 に答える
18
完全なクロス ブラウザの場合は、次を使用します。
cursor: pointer;
cursor: hand;
于 2012-12-05T19:46:00.150 に答える
13
単純に次のようにします。
li {
cursor: pointer;
}
コードに適用して、どのように機能するかを確認します。
li {
cursor: pointer;
}<ul>
<li>foo</li>
<li>goo</li>
</ul>注:また、カスタマイズされたカーソルで任意のハンド カーソルを使用できることも忘れないでください。たとえば、次のようなお気に入りのハンド アイコンを作成できます。
div {
display: block;
width: 400px;
height: 400px;
background: red;
cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}<div>
</div>于 2017-06-21T12:50:30.140 に答える
10
他のすべての回答は、標準の CSS ポインターを使用することを提案していますが、次の 2 つの方法があります。
cursor:pointer;要素に CSS プロパティを適用します。(これは、カーソルがボタンの上にあるときのデフォルトのスタイルです。)cursor:url(pointer.png);ポインターのカスタム グラフィックを使用して CSS プロパティを適用します。これは、ユーザー エクスペリエンスがすべてのプラットフォームで同じであることを確認したい場合 (ブラウザー/OS がポインター カーソルの外観を決定できるようにするのではなく) より望ましい場合があります。画像が見つからない場合に備えて、セカンダリ URL またはその他のオプションのいずれかを含むフォールバック オプションが追加される場合があることに注意してください。cursor:url(pointer.png,fallback.png,pointer);
もちろん、これらはli{cursor:pointer;}クラスとして.class{cursor:pointer;}、または各要素のスタイル属性の値として、この方法でリスト項目に適用できますstyle="cursor:pointer;"。
于 2016-02-27T05:25:48.360 に答える
9
于 2016-02-03T06:48:18.620 に答える
6
次のいずれかを使用できます。
li:hover
{
cursor: pointer;
}
また
li
{
cursor: pointer;
}
作業例 1:
li:hover
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>作業例 2:
li
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>于 2018-05-13T10:29:06.867 に答える
4
基本的な手の記号の場合:
試す
cursor: pointer
アイテムをドラッグしてドロップするような手の記号が必要な場合は、次を試してください。
cursor: grab
于 2015-12-24T04:13:02.833 に答える
4
HTML ハックの使用
注: これは悪い習慣と見なされるため、お勧めしません。
属性を含むアンカー タグでコンテンツをラップすると、アンカー プロパティの副作用 (CSS で修正) を使用しhrefてプロパティを明示的に適用しなくても機能します。cursor: pointer;
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>于 2016-06-19T11:19:03.063 に答える