在CSS中,鼠標是一個重要的交互組件。通過設置鼠標樣式,我們可以讓網站更加動態和吸引人。
要設置鼠標樣式,我們需要使用CSS中的cursor
屬性。這個屬性可以設置鼠標的樣式,常見的值有:
p { cursor: pointer; /* 指針樣式 */ cursor: help; /* 幫助樣式 */ cursor: wait; /* 等待樣式 */ cursor: text; /* 文本樣式 */ cursor: crosshair; /* 十字樣式 */ cursor: move; /* 移動樣式 */ }
除了以上常見樣式外,cursor
屬性還支持自定義鼠標樣式。我們只需要把自定義鼠標樣式文件的URL放到屬性中即可。
p { cursor: url("custom-cursor.png"), auto; }
注意,為了兼容性,我們需要把auto
值放在自定義樣式的后面。
除了設置鼠標樣式,CSS還支持鼠標事件。常見的鼠標事件有:
p:hover { /* 鼠標懸停事件 */ color: red; } p:active { /* 鼠標按下事件 */ color: blue; } p:focus { /* 鼠標聚焦事件 */ outline: none; /* 去掉默認的聚焦邊框 */ }
通過設置鼠標樣式和鼠標事件,我們可以讓網站更加動態和吸引人。記得嘗試一下自定義鼠標樣式,可能會有意想不到的效果哦!