首頁  >  文章  >  web前端  >  css3怎麼實現滑鼠隱藏效果

css3怎麼實現滑鼠隱藏效果

WBOY
WBOY原創
2022-04-27 17:20:582863瀏覽

在css中,可以利用cursor屬性實現滑鼠隱藏效果,該屬性用於定義滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀,當屬性值設為none時,就可以實現滑鼠隱藏效果,語法為「元素{cursor:none}」。

css3怎麼實現滑鼠隱藏效果

本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3怎麼實作滑鼠隱藏效果

cursor屬性定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀

常見滑鼠樣式如下:

url需使用的自訂遊標的URL。註:請在此清單的末端始終定義一種普通的遊標,以防沒有由 URL 定義的可用遊標。

default 預設遊標(通常是箭頭)

auto 預設。瀏覽器設定的遊標。

crosshair 遊標呈現為十字線。

pointer 遊標呈現為指示連結的指標(一隻手)

move 此遊標指示某物件可被移動。

e-resize 此遊標指示矩形框的邊緣可被向右(東)移動。

ne-resize 此遊標指示矩形框的邊緣可被向上及向右移動(北/東)。

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
</head>
<style>
div{height:150px;
width:150px;
border:1px solid #000;}
</style> 
<body>
<p>请把鼠标移动到元素上,可以看到鼠标指针发生变化:</p>
<div style="cursor:none"></div>
</body>
</html>

輸出結果:

css3怎麼實現滑鼠隱藏效果

(學習影片分享:css視頻教程

以上是css3怎麼實現滑鼠隱藏效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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