CSS表格是網頁設計中非常常見的一個組件,而通過CSS代碼,我們也可以實現一些很酷的效果,比如讓鼠標懸停在表格某一行或某一列上時,該行或該列變成黃色背景色的效果。
table { border-collapse: collapse; } tr:hover { background-color: yellow; }
上述代碼中,我們使用了CSS偽類:hover
,它代表的是當鼠標懸停在一個元素上時所觸發的狀態。而對于表格來說,我們可以通過設置tr:hover
讓鼠標懸停在表格的某一行時觸發狀態。
同時,為了讓表格看起來更加整齊美觀,我們還設置了border-collapse: collapse;
,使得單元格之間的邊框合并為一條線。
此外,我們也可以通過類似的代碼來設置當鼠標懸停在表格的某個單元格上時所觸發的狀態:
td:hover { background-color: yellow; }
這樣,當鼠標懸停在表格某個單元格上時,該單元格的背景色就會變為黃色。
通過簡單的CSS代碼,我們可以使得網頁的表格更加美觀易讀,并給用戶帶來更好的交互體驗。