クリックするとモーダルポップアップが表示されるヒーローショット画像がいくつかあります。画像上にカーソルを移動するたびに、カーソルを虫眼鏡に変えようとしています。magnify.cur次のCSSは、正しい場所に存在していても機能しないようです。
a.heroshot img {
cursor:url(/img/magnify.cur), pointer;
}
誰かが似たようなことをしたことがありますか？JavaScriptソリューションが存在してもかまいません。
編集：Safariでは動作しますが、Firefoxでは動作しません。
問題は、Mac 版 Firefox でカーソル URL が機能しないことかもしれません。
-moz-zoom-inキーワードを使用すると、Firefox でも同じ効果が得られます。
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
これにより、magnify.cur、Mozilla 固有のズーム カーソル、またはシステムのデフォルト カーソルが表示されます。ブラウザがサポートするリストの最初のカーソルが使用されます。
さまざまなブラウザでサポートされているカーソル キーワードのリストも表示されます。
これはトリックをしました:)
a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
更新:拡大アイコンは現在、ほとんどのブラウザーでネイティブにサポートされているため、次の CSS を使用できます。
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
URL文字列をアポストロッシュで囲むとどうなりますか？
a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}