CSS偽類是一種用于選擇某個元素在不同狀態下的樣式的方式,而鼠標偽類則是其中一種用于選擇鼠標操作元素時的樣式。
:hover
在CSS中,我們可以使用:hover偽類來選中元素在鼠標懸停時的樣式。比如,我們可以添加以下CSS規則來改變鏈接在鼠標懸停時的顏色:
a:hover { color: red; }
這樣當鼠標懸停在鏈接上時,鏈接的顏色就會變成紅色。
:focus
還有一個常用的鼠標偽類是:focus,它用于選擇元素在獲得焦點時的樣式。比如,我們可以使用以下CSS規則來改變輸入框在獲得焦點時的邊框顏色:
input:focus { border: 2px solid blue; }
這樣當用戶點擊到輸入框上,輸入框的邊框就會變為藍色。
:active
除了:hover和:focus外,還有一個鼠標偽類是:active,它用于選擇元素在鼠標點擊時的樣式。比如,我們可以使用以下CSS規則來改變按鈕在被點擊時的背景顏色:
button:active { background-color: yellow; }
這樣當用戶點擊按鈕時,按鈕的背景顏色就會變成黃色。
總之,鼠標偽類是一種非常有用的CSS技巧,可以讓網頁有更加豐富的交互效果。
下一篇css 鼠標放置變色