2

一部のcssに問題があります。リンクの上にカーソルを置いたときのカスタム カーソルを設定しようとしています。このコードを使用しようとしていますが、何も起こらず、ポインタのままです。

a {
    color: #99ccff;
    cursor: paw.cur;
}

a:hover {
    color: #71b2f4;
    cursor: paw.cur;
}

a:hover の最後に追加!importantしても機能しません。

4

2 に答える 2

5

Using:cursor: paw.cur;は間違った CSS 構文です。

カスタムイメージ ベースのカーソルを使用する場合は、URL を指定する必要があります。

カーソルの仕様を表示..ドキュメントはこちら (mozilla 開発者)です。

カスタムカーソルの例を次に示します。

a:hover {
    cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

jsfiddle ここ - カスタム

デフォルトのカーソルの例を次に示します。

a:hover {
    cursor: crosshair;
}

ここにjsfiddle - デフォルト

私は実際にこれに似た質問に少し前に答えました: CSSカスタムカーソルに外部画像を使用する

于 2013-09-22T01:39:13.320 に答える
1

次のように使用する必要があります。

cursor: url('paw.cur');

また

cursor: url('paw.gif');

カスタム カーソルを使用する場合は、URL を使用する必要があります。

MDN からの引用

正式な構文: [ [[ ]?,]* [ 自動 | デフォルト | なし | コンテキスト メニュー | ヘルプ | ポインター | 進捗状況 | 待って | 細胞 | 十字線 | テキスト | 縦書き | エイリアス | コピー | 移動 | ノードロップ | 許可されていません | e-サイズ変更 | n-サイズ変更 | サイズ変更 | nw-サイズ変更 | s-サイズ変更 | se-サイズ変更 | sw-サイズ変更 | w-サイズ変更 | 新しいサイズ変更 | ns-サイズ変更 | ニュースサイズ変更 | nwse-サイズ変更 | col-resize | 行のサイズ変更 | オールスクロール | ズームイン | ズームアウトする ] ]

<uri>
画像ファイルを指す url(…) またはカンマ区切りのリスト url(…), url(…), …。一部のカーソル画像タイプがサポートされていない場合に備えて、フォールバックとして複数が提供される場合があります。非 URL フォールバック (1 つ以上の他の値) は、フォールバック リストの最後にある必要があります。詳細については、cursor プロパティの URL 値の使用を参照してください。

と

a:hover の最後に !important を追加しても機能しません。

!important最高の優先度を設定するだけで、どこでも魔法をかけるわけではないことを信じてください

便利な投稿

于 2013-09-22T01:40:25.690 に答える