CSS中我們可以使用cursor屬性來控制鼠標在不同狀態下的樣式,其中最常用的就是改變鼠標箭頭的形狀了。
/* 將鼠標變為箭頭 */ cursor: pointer;
上述代碼中,我們設置了cursor屬性為pointer,這會將鼠標指針變為箭頭形狀。
除了pointer外,還有其他一些常用的值,如下表所示:
值 | 描述 |
---|---|
default | 保持默認狀態 |
auto | 自動根據光標位置改變,比如鼠標移動到鏈接上時會變成手型 |
help | 顯示問號圖標,一般用于提示信息 |
text | 變為I形光標,表示可以輸入文本 |
需要注意的是,在不同的操作系統和瀏覽器中,這些形狀可能不盡相同,但通常都會有對應的表現。
除了以上常見值外,我們還可以指定自定義形狀,例如:
/* 將鼠標變為放大鏡形狀 */ cursor: url('zoom-in.cur'), auto;
上述代碼中,我們通過url()函數來引用了一個自定義光標文件(zoom-in.cur),并將cursor屬性設置為該文件路徑。如果無法加載該文件,則會自動使用默認光標形狀。
總之,cursor屬性在CSS中非常常見,它可以很方便地改變鼠標的形狀,增強用戶交互體驗。
上一篇css中選擇li標簽
下一篇python畫箭頭圖