CSSカーソルの定義と使い方-htmlチュートリアル-php.cn

CSSカーソルの定義と使い方

零下一度

リリース： 2017-07-17 15:44:44

オリジナル

3355 人が閲覧しました

CSS属性のcursor:hand

IEでマウスをハンドタイプに設定する方法:cursor:handですが、FIREFOXでは無効です。解決策は、FIREFOXでset:cursor:pointerを使用することです。

そして、このポインター値は IE と FIREFOX で共通なので、cursor:pointer を使用します。

一般的に、マウスはテキスト上で移動すると上向きの斜めの矢印として表示され、ハイパーリンク上で移動すると手の形になります。

ただし、CSS を使用してマウスの表示効果を制御することはできます。たとえば、マウスを通常のテキスト上で移動するときにマウスを手のように見せることができます。

1. 定義と使い方

カーソル属性は、表示するカーソルの種類（形状）を指定します。

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

2. 属性

defaultデフォルトのカーソル（通常は矢印）autoデフォルト。ブラウザによって設定されたカーソル。十字線カーソルは十字線として表示されます。ポインターカーソルはリンクを示すポインター(手)として描画されますmoveこのカーソルはオブジェクトが移動できることを示します。 e-resize このカーソルは、長方形のボックスの端を右 (東) に移動できることを示します。 ne-resize このカーソルは、長方形のボックスの端を上と右 (北/東) に移動できることを示します。 nw-resize このカーソルは、長方形のボックスの端を上と左 (北/西) に移動できることを示します。 n-resize このカーソルは、長方形のボックスの端を上 (北) に移動できることを示します。 se-resize このカーソルは、長方形のボックスの端を下と右 (南/東) に移動できることを示します。 sw-resize このカーソルは、長方形のボックスの端を下と左 (南/西) に移動できることを示します。 s-resize このカーソルは、長方形のボックスの端を下 (南) に移動できることを示します。 w-resize このカーソルは、長方形のボックスの端を左(西)に移動できることを示します。テキストこのカーソルはテキストを示します。 wait このカーソルは、プログラム (通常は時計または砂時計) がビジーであることを示します。ヘルプこのカーソルは、利用可能なヘルプ (通常は疑問符またはバルーン) を示します。

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

3. サポートされているブラウザ

すべての主要なブラウザがカーソル属性をサポートしています。

注: Opera 9.3 と Safari 3 は

url 値をサポートしていません。

注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

4.html コード

<html>

    <body>
        <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
        <span style="cursor:auto">Auto</span><br />
        <span style="cursor:crosshair">Crosshair</span><br />
        <span style="cursor:default">Default</span><br />
        <span style="cursor:pointer">Pointer</span><br />
        <span style="cursor:move">Move</span><br />
        <span style="cursor:e-resize">e-resize</span><br />
        <span style="cursor:ne-resize">ne-resize</span><br />
        <span style="cursor:nw-resize">nw-resize</span><br />
        <span style="cursor:n-resize">n-resize</span><br />
        <span style="cursor:se-resize">se-resize</span><br />
        <span style="cursor:sw-resize">sw-resize</span><br />
        <span style="cursor:s-resize">s-resize</span><br />
        <span style="cursor:w-resize">w-resize</span><br />
        <span style="cursor:text">text</span><br />
        <span style="cursor:wait">wait</span><br />
        <span style="cursor:help">help</span>
    </body>

</html>

ログイン後にコピー

以上がCSSカーソルの定義と使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。