CSS表格是一個(gè)非常有用的元素,可以幫助我們展示數(shù)據(jù)和結(jié)構(gòu)。
然而,有時(shí)候,我們希望表格在特定的情況下呈現(xiàn)不同的效果,比如鼠標(biāo)經(jīng)過(guò)時(shí),表格單元格變成黃色。
這種效果可以通過(guò)CSS:hover偽類來(lái)實(shí)現(xiàn)。
table td:hover { background-color: yellow; }
這段代碼將為表格的所有單元格定義一種樣式,當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí),背景顏色將變?yōu)辄S色。
如果你只想應(yīng)用這種效果到特定的表格中,你可以給表格添加一個(gè)class,并用該class來(lái)限制樣式:
.mytable td:hover { background-color: yellow; }
另外,你也可以為表格的其他元素定義不同的hover樣式,比如表頭:
table thead th:hover { background-color: yellow; }
這個(gè)樣式只將作用于表頭單元格,而不是整個(gè)表格。
總之,CSS:hover是一個(gè)非常有用的工具,使我們能夠通過(guò)鼠標(biāo)懸停來(lái)實(shí)現(xiàn)動(dòng)態(tài)的效果。