web-dev-qa-db-ja.com

CSSはカスタムカーソル画像の原点（ホットスポット）を中央に変更します

カーソルにカスタム画像を使用したい。

これは問題ありませんが、私が見ることができるのは、原点（矢印の先端）がデフォルトで画像の左上にあることです。

Originを画像の中心に設定するにはどうすればよいですか。

問題を示すデモスニペットを次に示します。

div {
  width: 600px;
  height: 100px;
  background: pink;
  cursor: url(http://placehold.it/50x30), auto
}
<div>the cat in the hat<br> the cat in the hat<br> the cat in the hat<br> the cat in the hat</div>

テキストを選択しようとすると、画像の左上から選択されることに注意してください。

csscustom-cursor
35
Danield

1つの解決策は、マウスポインターに合わせて画像の位置を移動することです

cursor: url(image) [x y|auto];

質問に応答しませんが、これは機能しています

[〜＃〜] html [〜＃〜]

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}
58
Romain

次の方法で設定できます。

cursor:url(http://placehold.it/50x30) 25 15, auto;

追加した2つのパラメーターは、カーソルの中心を設定します。

17
Igle

mozilla からこれを見つけました。

Gecko 1.8（Firefox 1.5）では、カーソル値のCSS 3構文のサポートが追加されました。

カーソル：[[<x> <y>]？、] *キーワードカーソルのホットスポットの座標を指定できます。ホットスポットはカーソル画像の境界に固定されます。何も指定されていない場合、ホットスポットの座標はファイル自体（CURファイルおよびXBMファイルの場合）から読み取られるか、画像の左上隅に設定されます。 CSS3構文の例は次のとおりです。

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
}

/ * IEでは「auto」と「pointer」にフォールバックしますが、個別に設定する必要があります* /最初の数値はx座標で、2番目の数値はy座標です。この例では、ホットスポットを左上（0,0）から（4,12）のピクセルに設定します。

5
Danield