web-dev-qa-db-ja.com

JavaScriptマウスカーソルを画像に変更する方法は?

これを、オペレーティングシステムのプリセットイメージに変更できる例を見てきました。例:

$('body').css('cursor', 'wait'); 

しかし、私自身の/img/my_image.pngはどうですか?

助けてくれてありがとう。

14
JDS

CSSでURLを指定することにより、次のことができます。

div
{
cursor:url(smiley.gif),url(myBall.cur),auto;
}

参照 http://www.w3schools.com/cssref/pr_class_cursor.asp

21
malangi

カスタムカーソル(またはフォールバックとしてのデフォルトカーソル)を設定するJqueryの方法:

$('selector').css({'cursor': 'url(/cursors/customMoveCursor.cur), default'});
3
Kalle

私は通常外部の記事をリンクしませんが、これはあなたのニーズをカバーします。永続化のために、関連するものをここにコピーしました。

#dragMe {
    cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
            url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
            move;                                       /* Older browsers     */
}

クレジット: http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

カスタムカーソルを作成するときは、アクセシビリティを考慮することを忘れないでください。乾杯:)

2
C.S.