ポインター]。"/> ポインター]。">

CSSでマウスの形を変える方法

王林
王林オリジナル
2021-05-20 14:54:122978ブラウズ

CSS でマウスの形状を変更する方法は、指定された要素にカーソル属性を追加し、その属性値をポインター、移動、テキストなどの必要な値に設定することです。具体的なコード[5d8176d271105ef2924612ea3a75ab21Pointer54bdf357c58b8a65c66d7c19c8e4d114] のようになります。

CSSでマウスの形を変える方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

css には、cursor 属性という非常に便利な属性が用意されています。この属性を見てみましょう。

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

一般的に使用される属性値:

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

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

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

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

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

  • #text このカーソルはテキストを示します。

  • #wait このカーソルは、プログラムがビジー状態であることを示します (通常は時計または砂時計)。

  • #ヘルプ このカーソルは、利用可能なヘルプ (通常は疑問符または吹き出し) を示します。

コード例:

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

以上がCSSでマウスの形を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る