CSS 是一種樣式表語言,用于描述網頁文檔的外觀和樣式。其中,鼠標滑過效果是一種比較常見的網頁交互特效,可以通過 CSS 實現。
td:hover { background-color: #99CCFF; }
以上代碼表示,當鼠標移動到 td 元素上時,其背景色會變成 #99CCFF。這里使用了:hover 偽類,表示鼠標滑過狀態。
需要注意的是,CSS 中的樣式會層疊,因此可能存在多個樣式同時作用于同一元素的情況。在這種情況下,使用后面的樣式會覆蓋之前的樣式。因此,如果鼠標移動到某個 td 元素上時,已經存在其他樣式,那么使用 :hover 偽類時就需要考慮這個問題。
td:hover { background-color: #99CCFF !important; }
為了解決樣式層疊的問題,可以在樣式聲明中加上 !important 關鍵字,表示該樣式最高優先級。這樣在存在其他樣式的情況下,也能確保鼠標滑過時的樣式生效。
除了背景色,鼠標滑過時也可以改變元素的邊框顏色、文本顏色等等。只需要將上述代碼中的 background-color 屬性替換成其他樣式屬性即可。
td:hover { border-color: #99CCFF; }
上述代碼表示,當鼠標移動到 td 元素上時,其邊框顏色會變成 #99CCFF。
總之,通過 CSS 實現鼠標滑過效果是一種簡單而又實用的網頁交互特效,可以為網頁增添更多的互動性。