web-dev-qa-db-ja.com

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

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

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

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

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

javascriptjqueryhtmlimagemouse
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.