CSS3 cursorのクリック座標

CSSのcursorでオリジナルのマウスカーソルを使うこともあると思うんだが、これって、CSS3だとホットスポットを設定できるようになったんだね・・。

ホットスポットとは、クリックしたときの基準点になる部分なんだけど、
普通のマウスカーソルならカーソルの一番左上がホットスポットだし、テキストカーソルなら中心がホットスポットになる。これは日頃の感覚で知っていると思う。

curファイルを作れるソフトでは、ホットスポットを指定できたりするけど、pngとか普通の画像をオリジナルのマウスカーソルとして使おうとすると、ホットスポットが左上固定になってしまって困るよね。

そこでcss3ですよ、奥さん!
ホットスポット指定は簡単。
以下のように画像を指定した後にx座標y座標を設定するだけ!
基点(0, 0)は画像の左上です。

#selector{
  cursor: url(cursor.png) 3 5, auto;
}

この場合、url画像の左上を原点とした(3, 5)の座標がホットスポットになる。

この指定の仕方をするまでは、いちいち座標計算して位置をごまかしてたわ・・。

CSS3だし、IEでは動作どうなるんだろう。
まぁIEはいっか。

タイトルとURLをコピーしました