CSS可以通過:hover偽類來表示當鼠標移動到元素上時,要應用特定的樣式。通常情況下,我們會將:hover偽類與元素選擇器組合使用,以便當鼠標移動到特定的HTML元素上時應用樣式。
/* 當鼠標懸停在元素上時,改變背景顏色 */ p:hover { background-color: yellow; } /* 當鼠標懸停在鏈接上時,改變文字顏色 */ a:hover { color: blue; }
除了:hover偽類,CSS還可以使用:active和:focus來表達不同的用戶交互狀態。
/* 當鼠標點擊元素時,改變背景顏色 */ p:active { background-color: red; } /* 當元素擁有焦點時,改變邊框顏色 */ input:focus { border-color: green; }
通過使用這些偽類,在用戶與網頁交互時,我們可以使頁面更加動態和豐富。