一、指針變化
在網頁開發過程中，指針的變化很常見，如當鼠標懸停在圖片上時，鼠標指針會變為手型，或者當鼠標懸停在鏈接上時，鼠標指針會變為小手形狀。
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-hk/n/133177.html
微信掃一掃 
支付寶掃一掃 