2015-11-27 21 views
5

カーソルのカスタム画像を表示しています。私はmousedown上のカーソルイメージを交換するためにjQueryを使用していますが、カーソルのxとyプロパティをイメージの幅と高さに手動で設定して、イメージが下の登録ポイントから回転するように見せます画像の右。SafariでCSSのカーソル位置属性が機能しない

関連するCSSは次のとおりです。

#face-container { 
    cursor: url(../img/cursor_eel.png) 52 128, auto; 
} 

#face-container.punching { 
    cursor: url(../img/cursor_eel_rotated.png) 127 127, auto; 
} 

jQueryのは、マウスダウンの「パンチ」クラスを追加し、のmouseupでそれを削除します。

ChromeとFirefoxでは、これは期待どおりに動作します。画像はCSSで指定されたxとyの値だけシフトして表示され、mousedownではカーソル画像は右下の登録ポイントウナギの尾)。サファリ9.0.1(マックOS 10.10.5)で

Chrome animation

、xとyの値を受け入れるようには見えないので、画像は、カーソル位置の左上に表示され、そしてmousedownでは、カーソルイメージは左上(ウナギの鼻)にある登録点を中心に回転しているように見えます。

Safari animation

私はSafariが指定されているカーソル画像の位置を移動させるとChromeのようにマウスダウン効果の仕事をするために取得できますか?

Full demo here

Github repository here

+0

私のコンピュータのSafariで回転が正常に動作しているようです。私は、Safariのカーソルに関するいくつかの問題が、新しいタブを開くか、ブラウザを再起動して解決したと読んだ。いくつかの種類のいくつかのハングアップ.. – danjah

+0

@ danjah新しいタブを開き、ブラウザを再起動しても私のために解決されませんでした。また、ChromeとSafariに表示されている結果を示すアニメーションで質問を更新しました。 –

+0

ユニットの測定値を '52px 128px'と' 127px 127px'に追加してみてください。 – Vucko

答えて

2

Safariが異なり、他のブラウザよりもホットスポットの位置対カーソル画像サイズを算出し、ように見えます。それを正確に画像サイズに設定することはできません。

たとえば、カーソル位置を50 50に設定した場合、50px x 50pxの画像では、Safariではカーソル位置が0として扱われます。おそらく無視されます。 Chromeでは、実際の画像サイズよりも大きい場合は実際の画像サイズ、イベントに設定されます。

参照:https://jsfiddle.net/bb335rgk/1/

しかし、実際の画像サイズよりちょうど1ピクセル以下に設定し、それを受け入れるだろう。あなたの場合、正確である必要はないので、十分に良いかもしれません。このように:

#face-container { 
    cursor: url(../img/cursor_eel.png) 51 127, auto; 
} 

#face-container.punching { 
    cursor: url(../img/cursor_eel_rotated.png) 126 126, auto; 
} 
+0

それはそれをしました!私はStackOverflowが私に(17時間)私を許可するとすぐに賞金を授与します。 –

関連する問題