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


128

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

そして、jQueryを使用してこれを行う方法を説明します。

回答:


247
$('selector').css('cursor', 'pointer'); // 'default' to revert

元の質問ではわかりにくいかもしれませんが、「指」カーソルは実際には「ポインタ」と呼ばれています。

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

可能なすべてのデフォルトポインターはデモに見えます


14
可能であれば、CSSを使用して(たとえば:hoverセレクターで)、jqueryを完全に回避します。
誰が

8
@The Who-もちろんですが、カーソルの変更がJSに依存する機能の一部である場合(スライダーがあるとしましょう)、ユーザーがJSをオフにしている場合にカーソルを変更する必要はありません。
Peter Ajtai

3
これをと組み合わせて使用​​して$('selector').css('cursor', 'auto');、マウスをポインター領域の外に移動したときにスタイルを取り除きました。CSSクラスは...きれいにしてあり$('...').addClass('someclass')$('...').removeClass('someclass')
jocull

これをbodyタグに適用して、次のようにカスタムカーソルに変更すると、$('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );動作しないようです。これがjqueryまたはchrome内のバグかどうかはわかりません。他のブラウザでこれをテストしたことはありません。
jcfrei

16

更新!新しく改善されました!プラグイン@ GitHubを見つけください!


別のメモでは、そのメソッドは単純ですが、任意の要素のカーソルの変更をと同じくらい簡単にするjQueryプラグ(このjsFiddleにあり、コードをコメント行の間にコピーして貼り付けるだけ)を作成しました$("element").cursor("pointer")

しかし、それだけではありません!今すぐ行動すると、あなたは手の機能を得ることができますpositionishover追加料金なしのために!そうです、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!

供給は限られているので、今すぐ行動してください!


7

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

これは、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>


1

とても簡単です

HTML

<input type="text" placeholder="some text" />
<input type="button" value="button" class="button"/>
<button class="button">Another button</button>

jQuery

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

  // for old IE browsers
  $('.button').css( 'cursor', 'hand' ); 
});

JSfiddleで確認してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.