9

パスはcssファイルを基準にしているはずですが、カーソルとして使用しようとしている画像の場合はそうではないようです。

ファイル構造は次のとおりです。

Content/Site.css
Content/images/butteryfly.ani
Content/images/user.png

Site.css:

.butterfly
{       
cursor: url('images/butterfly.ani'), pointer;    
}

/*this works*/
.ui-icon-user
{
    background-image: url(images/user.png) !important;
    background-position: 0 0;
}

次のように変更すると機能します。

.butterfly
{       
cursor: url('Content/images/butterfly.ani'), pointer;    
}

カーソルに対して相対URLが機能しないのはなぜですか?

編集: Chrome、Firefox、IE9では動作しません。すべてのブラウザで、カスタムカーソルの代わりにハンドカーソルが表示されます。

Edit2:フォローアップ:htmlページはさまざまなレベルにあるため、実際にこれを自分のサイトで機能させるにはどうすればよいですか?どういうわけかcssで相対URLを指定する方法はありますか、それとも各ページと同じレベルにカーソルのコピーを置く必要がありますか(これは最悪です!)?

4

3 に答える 3

14

IEとFFの両方で機能させるには、.cur拡張子を使用する必要があります。また、IE11以前では、カーソルファイルへのURLは、cssファイルではなくページを基準にしています。

cursor: url('http://example.com/Content/images/butteryfly.cur'), default;

IEによるサーバーへの不要なヒットが発生するため、2つのURL値を使用しないようにしてください。代わりに、IE、FF、およびChromeで正常に機能する絶対URLを使用してください。Operaはデフォルトを使用します。

于 2012-10-05T22:39:28.340 に答える
6

Internet Explorerが相対URLをHTMLドキュメントに関連するものとして解釈することだけを知っていますが、最近のブラウザー(Mozilla Firefox、Google Chrome)は相対URLを「.css」に関連するものとして解釈します。

/*
 The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS     file
*/

#example {
  cursor: url('arrow.cur'),            /* Modern browsers    */
          url('style/arrow.cur'),      /* Internet Explorer  */
          default;
 }     
于 2012-09-17T07:37:23.487 に答える
1

この短い記事を読むことをお勧めします。 http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

IEのバグには3つの回避策があります。IEはカスタムカーソルのURLを相対的なものとして解釈しません。他のタイプのURLはIEで正しく解釈されます

  1. 絶対パスを使用する
  2. タグ間でhtmlページのカーソルスタイルを移動します
  3. John Cが提供するソリューションと同様に、IEの条件付きコメントを使用します。
于 2013-03-16T11:02:17.340 に答える