首頁 > 文章 > web前端 > css怎麼改變滑鼠形狀

css怎麼改變滑鼠形狀

王林原創: 2021-05-20 14:54:122909瀏覽

css改變滑鼠形狀的方法是，在指定元素上新增cursor屬性，並將屬性值設為所需的值，如pointer、move、text等，具體程式碼如【44d0a41dc33d35d29e8b22c19287700ePointer54bdf357c58b8a65c66d7c19c8e4d114】。

css怎麼改變滑鼠形狀

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

css給我們提供了一個非常好用的屬性，它就是cursor屬性，下面讓我們來一起看看這個屬性。

cursor 屬性規定要顯示的遊標的類型（形狀）。

常用的一些屬性值：

default 預設遊標（通常是一個箭頭）
auto 預設。瀏覽器設定的遊標。
crosshair 遊標呈現為十字線。
pointer 遊標呈現為指示連結的指標（一手）
##move 此遊標指示某物件可移動。
text 此遊標指示文字。
wait 此遊標指示程式正忙碌（通常是一隻手錶或沙漏）。
help 此遊標指示可用的幫助（通常是一個問號或一個氣球）。

程式碼範例：

<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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中文字超出div怎麼辦下一篇：css中文字超出div怎麼辦

看更多