CSS中的:hover選擇器可以讓我們在鼠標(biāo)滑過某個元素時改變其樣式。這是一個非常常用的效果,可以為頁面添加一些互動性,使用戶體驗更加友好。下面是一個簡單的示例:
.btn { background-color: #4CAF50; color: white; padding: 12px 24px; font-size: 16px; border: none; border-radius: 4px; } .btn:hover { background-color: #3e8e41; }
上面的代碼定義了一個按鈕的樣式,包括背景顏色、字體顏色、內(nèi)邊距和邊框半徑等。當(dāng)鼠標(biāo)滑過這個按鈕時,使用:hover選擇器將背景顏色從綠色變?yōu)樯罹G色,給人一種按鈕被“按下”的感覺。
:hover選擇器可以用于各種元素,包括文本、鏈接、圖片等。例如,下面的代碼可以讓圖片在鼠標(biāo)滑過時變亮:
img:hover { opacity: 0.8; filter: brightness(120%); }
注意,:hover選擇器只能應(yīng)用于可交互的元素,例如鏈接、按鈕、輸入框等。如果應(yīng)用于其他元素,可能會導(dǎo)致不可預(yù)期的結(jié)果。
除了:hover選擇器,CSS還提供了其他偽類選擇器,例如:focus用于當(dāng)元素獲取焦點時;:active用于當(dāng)元素被點擊時;:nth-child用于選取指定位置的子元素等等。這些選擇器可以幫助我們更加精確地控制元素的樣式,為頁面添加更多的動態(tài)效果。