Pointer< /span>】。"/> Pointer< /span>】。">

首頁 >web前端 >css教學 >css怎麼改變滑鼠形狀

css怎麼改變滑鼠形狀

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

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

相關文章

看更多