CSS樣式中的:hover是一個非常有用的偽類選擇器,它可以用來在鼠標劃過某個元素時改變該元素的樣式。
當鼠標移動到一個用:hover選擇器設定的元素上時,此元素的樣式將會有一個特定的改變,例如背景色的改變、字體的改變、邊框顏色的改變等等。
下面是一個使用:hover選擇器改變元素樣式的例子:
.btn{ background-color: #ccc; color: #333; padding: 10px 20px; border-radius: 5px; transition: all 0.3s; /* 這里使用動畫效果 */ } .btn:hover{ background-color: #333; color: #fff; border: 1px solid #fff; }
上面的代碼定義了一個按鈕類.btn,當鼠標劃過這個按鈕時,按鈕的顏色、文字顏色和邊框顏色會發生改變。
需要注意的是,:hover偽類選擇器只能應用在有:hover效果的鏈接、按鈕等元素上,如果應用在其他元素上可能會導致樣式異常。
使用:hover偽類選擇器可以使網站更加美觀、交互性更強,也可以給用戶提供更好的使用體驗。