和洋風KAI

マウスオーバーしたときにカーソルを変更させるCSS

Photo: jared

マウスオーバーしたときにカーソルを変えようと思うとJavaScriptを使うのが常套手段ですが、スタイルシートでも変更できるって知っていましたか?

ちょーカンタンにマウスオーバーしたときにカーソルを変更できるスタイルシート「cursor:」

cursor: pointer;

なにも難しいことはありません。マウスオーバーしたときにカーソルを変更したい部分に上のコードを追加するだけです。

このコードを追加すると、マウスオーバーしたときにI型だったカーソルが☞型のカーソルに変更してくれます。

ちなみに値を変更すれば、さまざまなカーソルに変更できます。

crosshairだったら十字、moveだったら十字矢印、waitだったら砂時計に変更可能です。

また以下のようにURLを当ててやればオリジナルのカーソルに変更も可能です。

cursor: url(https://wayohoo.com/cursol.gif), default;

ちょこんと載せてやるだけで実装できてしまうので、すごくカンタンです。今までJavaScriptで実装していた方はぜひ実装してみてください。

【CSS】marginとpaddingを1行で書くときに、どこが上下左右なのか覚える方法。