在css中,可以利用cursor屬性實現滑鼠隱藏效果,該屬性用於定義滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀,當屬性值設為none時,就可以實現滑鼠隱藏效果,語法為「元素{cursor:none}」。
本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。
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>
輸出結果:
(學習影片分享:css視頻教程)
以上是css3怎麼實現滑鼠隱藏效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!