web-dev-qa-db-ja.com

画像上の拡大鏡（ズーム）カーソル

Fancybox画像の上にカーソルを置いたときにカーソルを虫眼鏡に変更するソリューションを探しています。

Pinterestのように、画像をホバーするとき（クロムを使用）。

これまでのところ、クロスブラウザをサポートしていないこれがあります。

.picture img {
    cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

この問題に対処するより良い方法はありますか？

csscursorfancybox
26
Delos Chang

そのためには、カーソルファイル.curを使用する必要があります。 .gif ファイルなので、次のようになります

.picture img {
    cursor:url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}
26
Mr. Alien

次を使用できます。

.picture img{
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}
34
mezod

caniuse.com によると、関連するブラウザはすべてcursor: zoom-in;except IEもちろん。IE使用率はw3schoolsで6.1％に低下します...

.picture img{
   cursor: zoom-in;
}
7
Michael Tranchida