web-dev-qa-db-ja.com

CSSカスタムカーソルに外部画像を使用する

CSSカスタムカーソルに外部画像URLを使用することはできますか？次の例は機能しません。

HTML：

<div class="test">TEST</div>

CSS：

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_Apple.jpg');
}

フィドル： http://jsfiddle.net/wNKcU/4/

htmlcsscursor
44
Yarin

画像が大きすぎるため機能しませんでした-画像の寸法に制限があります。たとえば、Firefoxでは、サイズ制限は128x128pxです。詳細については、 このページ を参照してください。

さらに、autoも追加する必要があります。

jsFiddle demo here -これは実際の画像であり、デフォルトのカーソルではないことに注意してください。

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
<div class="test">TEST</div>
78
Josh Crozier

これをコメントとして書きますが、担当者がいません。 Josh Crozierが答えたのは正しいですが、IEの場合、.curと.aniのみがこの形式でサポートされています。したがって、万が一の場合に備えて、おそらくフォールバックが必要です。

.test {
    cursor:url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), url(foo.cur), auto;
}
9
CFraser

場合によっては、オフセット（アンカー）の設定を検討する必要があります。

cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif) 10 3, auto;

この例では、offsetxを10に、offsetyを3（左上から）に設定しているため、ポインターの指はアンカーになります。 fiddle： http://jsfiddle.net/5kxt1j98/ （コンテナーの左上にカーソルを移動することで違いを確認できます）

1
yaya