在CSS中,我們經常會用到選中元素后修改其樣式的技巧。其中一種方式就是使用:hover
偽類。當用戶將鼠標懸停在一個元素上時,我們可以為其設置特定的樣式。除了:hover
,還有其他偽類如:active
、:focus
等可以用來選中不同的元素狀態。這些偽類的使用十分廣泛。
/* 選中鏈接后變色 */ a:hover { color: #FF0000; } /* 選中按鈕后背景變為藍色 */ button:active { background-color: #0000FF; } /* 用戶在一個輸入框中輸入后,輸入框獲得焦點,邊框變為橙色 */ input:focus { border-color: #FFA500; }
除了使用偽類來選中元素外,我們還可以使用一些其他的屬性來對選中后的元素進行樣式修改。其中,最常用的要數修改背景顏色了。我們可以用background-color
屬性來設置元素的背景顏色。下面是幾個例子:
/* 鼠標懸停在一個div上時,背景變為灰色 */ div:hover { background-color: #CCCCCC; } /* 用戶選中一個單元格后,背景變為藍色 */ td:active { background-color: #0000FF; } /* 輸入框聚焦時,背景變為黃色 */ input:focus { background-color: #FFFF00; }
通過設置不同的背景顏色,我們可以讓選中后的元素更加明顯醒目。同時,這也為網站的交互性和用戶體驗提供了很大的幫助。
上一篇只用div不用css
下一篇css選中與不選中