ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS カーソルのプロパティと使用法の概要
cursor 属性は、表示するカーソルの種類(形状)を指定します。このプロパティは、マウス ポインタが要素の境界内に置かれたときに使用されるカーソルの形状を定義します (ただし、CSS2.1 では、どの境界がこの範囲を決定するか定義していません)。
DIV CSS をレイアウトしていると、マウス ポインターが指の形やその他のスタイルに変わるなど、オブジェクト内でマウス ポインター カーソルのコントロールに遭遇します。次に、マウス ポインター スタイルのカーソル コントロールを紹介します。システムのデフォルトのマウス ポインタ スタイルに加えて、CSS を介して画像をマウス ポインタとして設定することもできます。もちろん、これはマウス ポインタのさまざまな小さな画像スタイルを設定するためのものです。 CSSカーソル。
1. CSS-cursor属性
cursor属性は、表示するカーソルの種類(形状)を指定します
2. CSSカーソルURLの使用形式: css: {cursor:url('icon path'),auto;} //IE、FF、Chrome ブラウザはすべて利用可能ですコード例:html{cursor: url("ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}分析: 前の URL はカスタム マウス アイコン パスであり、 2 番目のパラメータ auto は CSS 標準のカーソル スタイルで、他の属性 (ポインタ/デフォルトなど) に置き換えることができます。 3. auto: 通常のマウスcrosshair: クロスヘアマウスdefault: デフォルトのマウスpointer: ポイントマウス (hand、hand のみを認識する IE5 を処理するために 2 つ書かれています。 ) move: マウスを移動します4. 注意すべき点がいくつかあります: 1. 画像アドレスは絶対パスです、2. 画像サイズは 32*32 であることが望ましいです。とにかく、各ブラウザで解析されるサイズは異なります5. url 使用されるカスタム カーソルの URL。 注: URL で定義された使用可能なカーソルがない場合に備えて、常にこのリストの最後に通常のカーソルを定義してください。 default デフォルトのカーソル (通常は矢印) auto デフォルト。ブラウザによって設定されたカーソル。 十字線 カーソルが十字線として表示されます。 pointer カーソルはリンクを示すポインタ(手)として表示されます。 move このカーソルはオブジェクトが移動できることを示します。 6. CSSのcursor属性について今日はCSSのcursor属性についてまとめてみます。 cursor 属性は、カーソルの表示スタイルを制御するために使用されます。可能な値は次のとおりです。
cursor:url()*| {auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}* は、この値を少なくとも 1 つ記述することを意味し、URL の後の {} で値を選択できます。 。
関連する質問と回答:
1.javascript - window.resize イベントを要素にバインドした後、以前に設定されたカーソル属性は無効になります
2. ビジュアル モードでのマッピング <。 ;tab> 分割ウィンドウ間のカーソル切り替えを実装しますか?1.
php.cn - CSS ビデオ チュートリアル以上がCSS カーソルのプロパティと使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。