ホームページ  >  記事  >  ウェブフロントエンド  >  CSS カーソルのプロパティと使用法の概要

CSS カーソルのプロパティと使用法の概要

零下一度
零下一度オリジナル
2017-06-09 11:36:343351ブラウズ

cursor 属性は、表示するカーソルの種類(形状)を指定します。このプロパティは、マウス ポインタが要素の境界内に置かれたときに使用されるカーソルの形状を定義します (ただし、CSS2.1 では、どの境界がこの範囲を決定するか定義していません)。

DIV CSS をレイアウトしていると、マウス ポインターが指の形やその他のスタイルに変わるなど、オブジェクト内でマウス ポインター カーソルのコントロールに遭遇します。次に、マウス ポインター スタイルのカーソル コントロールを紹介します。システムのデフォルトのマウス ポインタ スタイルに加えて、CSS を介して画像をマウス ポインタとして設定することもできます。もちろん、これはマウス ポインタのさまざまな小さな画像スタイルを設定するためのものです。 CSSカーソル。

1. CSS-cursor属性

cursor属性は、表示するカーソルの種類(形状)を指定します

CSS カーソルのプロパティと使用法の概要

2.

CSSカーソルURLの使用形式の詳細説明

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.

css カーソルマウスの形状

url 使用されるカスタム カーソルの URL。

注: URL で定義された使用可能なカーソルがない場合に備えて、常にこのリストの最後に通常のカーソルを定義してください。

default デフォルトのカーソル (通常は矢印)

auto デフォルト。ブラウザによって設定されたカーソル。

十字線 カーソルが十字線として表示されます。

pointer カーソルはリンクを示すポインタ(手)として表示されます。

move このカーソルはオブジェクトが移動できることを示します。

6.

CSSのカーソル属性のコード例を詳しく解説

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 ビデオ チュートリアル

2. マウス フォーカスをテキスト ボックスに配置します

以上がCSS カーソルのプロパティと使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。