web-dev-qa-db-ja.com

カスタムカーソル画像CSS

いくつかのヒーローショット画像があり、クリックするとモーダルポップアップが表示されます。カーソルが画像上を移動するたびに虫眼鏡に変わるようにしています。次のCSSは、私のmagnify.curは適切な場所にあります。

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

誰も似たようなことをしたことがありますか？ JavaScriptソリューションが存在する場合、私は気にしません。

[〜＃〜] edit [〜＃〜]：Safariでは動作しますが、Firefoxでは動作しません。

cssfirefoxmouse-cursor
35
Chris J Allen

あなたの問題は、Firefox for MacでカーソルURLが機能しないことです。

-moz-zoom-inキーワードを使用すると、Firefoxで同じ効果を得ることができます。

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

これにより、magnify.cur、Mozilla固有のズームカーソル、またはシステムのデフォルトカーソルが表示されます。ブラウザがサポートするリストの最初のカーソルが使用されます。

また、さまざまなブラウザでサポートされている カーソルキーワードのリスト も表示できます。

36
isani

これはトリックをやった:)

a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
9
Chris J Allen

PDATE：現在、ほとんどのブラウザで拡大アイコンがネイティブにサポートされているため、次のCSSを使用できます。

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
7
Kevin Borders

（Kevin Bordersの回答に基づく）

正しい代替順序は次のとおりです

a.heroshot img {
    cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;  
    cursor: url(/img/zoom_in.png), -moz-zoom-in;  
    cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}

テスト済み：Firefox 47、Chrome 51、Opera 36、Edge 13およびIE11。

2
SandroMarques

URL文字列をアポストロフィで囲むとどうなりますか？

a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}

こちらもご覧ください http://www.w3schools.com/CSS/pr_class_cursor.asp

2
activout.se

私のサイドURLプロパティは次のようにカーソルで機能しています

 #myid{cursor:url('myimage.png') , auto}

しかし、ここでは画像サイズの問題だと思います。なぜなら、32 * 32サイズ以下を使用すると、これは完全に機能するからです。

カスタムカーソルへのURLのカンマ区切りリスト。注：URL定義のカーソルを使用できない場合は、常にリストの最後に汎用カーソルを指定してください

 #myid{cursor:url('myimage.png') , auto}
 #myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc

これだけを入れると機能しません

 #myid{cursor:url('myimage.png')}
0
user3335780