有些時候,我們在網頁設計中需要增加一些交互性,比如按鈕鼠標懸停時需要變成手型。通過 CSS,我們可以很容易地實現這個效果。
button:hover { cursor: pointer; }
在這個例子中,我們使用了偽類 :hover 來定義鼠標懸停時的樣式。通過 cursor 屬性,我們設置鼠標的樣式為 pointer,即手型。
需要注意的是,如果按鈕的父元素已經有了自己的鼠標樣式,那么按鈕將沿用父元素的樣式。這種情況下,我們需要使用更加明確的指針類型來覆蓋父元素的樣式。比如,如果父元素使用了默認的指針,我們可以將按鈕的樣式設置為 mouse。
button:hover { cursor: pointer; } .parent-class { cursor: default; }
在這個例子中,父元素的樣式設置為 default,即默認的指針樣式。通過將按鈕的樣式設置為 pointer,我們可以保證鼠標在懸停時使用手型。
總的來說,通過簡單的 CSS 樣式設置,我們可以為按鈕增加交互性,提高用戶體驗。