ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでマウスの形を変える方法

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

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

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でマウスの形を変える方法

関連記事