スクロールバー上をマウスオーバーすると画像指定したマウスカーソルが通常カーソルに戻ってしまう

Question

ブラウザゲームを作成しています。

やりたい事は、canvas内では指定した画像でマウスカーソルを表示することです。

CSSでcanvas要素にマウスカーソルを特定の画像にする記述をしました。
しかし、画面内のスクロールバー上にマウスオーバーすると通常カーソルに戻されてしまいます。
スクロールバーはdivにoverflow:autoを設定したことによって表示されている状態です。

CSS、htmlの経験が浅く手探りで試しましたが解決できません。
知見をお持ちの先輩諸氏のお力をお借り出来たらと願います。

よろしくお願いいたします。

Answer 1

スクロールバーが出ることが正しい状態か不明なので、方法だけ
以下はベンダーセレクターです。
Chrome、Safari、OperaなどのWebkitブラウザで機能するCSS指定です。
FirefoxやEdge・IEでは機能しません(最近はどうか不明)
FirefoxやEdge・IEで機能しない場合は別途方法を検討ください。

-webkit-scrollbarを実際に使用したことはないのでどうなるかは不明ですので、
実際に試してみて下さい。

div::-webkit-scrollbar-thumb {
  cursor:url("xxx.jpg"), auto;
}

Comments

[katsutoku_ssk]

ご返答ありがとうございます。
なるほど！スクロールバーにcssで指定すればよかったのですね。こちらの方法で試してみます。