一、指針變化
在網頁開發過程中，指針的變化很常見，如當滑鼠懸停在圖片上時，滑鼠指針會變為手型，或者當滑鼠懸停在鏈接上時，滑鼠指針會變為小手形狀。
CSS提供了一種簡便的方法來實現指針變化，即使用cursor屬性。cursor屬性可用於定義在滑鼠移到某元素之上時所顯示的游標形狀。cursor屬性可使用如下值：
cursor:auto; /* 默認游標 */ cursor:default; /* 默認游標 */ cursor:none; /* 隱藏游標 */ cursor:context-menu; /* 上下文菜單（通常是小箭頭） */ cursor:help; /* 幫助游標（通常是問號加小箭頭） */ cursor:pointer; /* 小手游標 */ cursor:progress; /* 進度條（通常是小手加等待圖標） */ cursor:text; /* 文本游標（通常是一根豎線） */ cursor:wait; /* 等待游標（通常是轉圈的小圓點） */
以下是一個例子：
<style>
.myButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer; /* 小手游標 */
}
</style>
<button class="myButton">點擊我</button>
二、自定義游標
除了使用已有的游標形狀外，CSS還可以允許我們自定義游標，只需指定自己定義的圖片即可。例如：
<style>
.myCursor {
cursor: url('myCursor.png'), auto;
}
</style>
<p class="myCursor">這是一段滑鼠指針為自定義圖片的文本</p>
三、小結
通過cursor屬性，我們可以很方便地實現指針變化，並且可以自定義游標形狀，可以為網頁增加更豐富的視覺效果。
原創文章，作者：VZCY，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/133177.html
微信掃一掃 
支付寶掃一掃 