web-dev-qa-db-ja.com

jQueryを使用してカーソルをポインタから指に変更するにはどうすればよいですか?

これはおそらく非常に簡単ですが、私は前にそれをやったことがありません。通常のポインターではなく、どのようにカーソルを指に変更しますか(リンクをクリックする場合など)。

そして、jQueryを使用してこれを行う方法は、それを使用しているからです。

119
Andrew
$('selector').css( 'cursor', 'pointer' );

元の質問ごとに混乱するかもしれませんが、実際には「指」カーソルは「ポインター」と呼ばれます。

通常の矢印カーソルは「デフォルト」です。

すべてのデフォルトのポインタの外観DEMO

231
Peter Bailey

更新!新機能と改善点!プラグインの検索@ GitHub


別の注意事項として、 そのメソッド は簡単ですが、jQueryプラグを作成しました( このjsFiddleで見つけ、ただコピーして過去コメント行間のコード )。これにより、$("element").cursor("pointer")のように簡単に任意の要素のカーソルを変更できます。

しかし、それだけではありません!今すぐ行動すれば、追加料金なしでハンド関数positionおよびishoverを入手できます!そうです、2つの非常に便利なカーソル機能...無料!

デモで見られるようにシンプルに機能します。

$("h3").cursor("isHover"); // if hovering over an h3 element, will return true, 
    // else false
// also handy as
$("h2, h3").cursor("isHover"); // unless your h3 is inside an h2, this will be 
    // false as it checks to see if cursor is hovered over both elements, not just the last!
//  And to make this deal even sweeter - use the following to get a jQuery object
//       of ALL elements the cursor is currently hovered over on demand!
$.cursor("isHover");

また:

$.cursor("position"); // will return the current cursor position as { x: i, y: i }
    // at anytime you call it!

供給は限られているため、今すぐ行動しましょう!

16
SpYk3HH

通常のポインターではなく、どのようにカーソルを指に変更しますか(リンクをクリックする場合など)。

これは、CSSプロパティcursorを使用して達成するのが非常に簡単で、jQueryは不要です。

詳細については、 CSS cursor property および cursor - CSS | MDN をご覧ください。

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>
6
Romulo

とても簡単です

HTML

<div>
<input type="text" placeholder="sometext" />

<input type="button" value="button" class="button"/>
<br/><br/>
<button class="button"> Another button</button>
</div>

JQuery

$(document).ready(function(){
$('.button').css( 'cursor', 'pointer' );

// for old IE browsers

$('.button').css( 'cursor', 'hand' ); 

});

JSfiddleで確認してください

1
Abk