溫馨提示×

text-decoration如何配合hover使用

小樊
88
2024-06-19 09:30:54
欄目: 編程語言

要配合hover使用text-decoration，可以通過CSS來實(shí)現(xiàn)。例如，當(dāng)鼠標(biāo)懸停在一個鏈接上時，可以改變鏈接的文本裝飾樣式，比如改變顏色、下劃線等。

以下是一個示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none; /* 初始狀態(tài)下去掉鏈接的下劃線 */
  color: blue; /* 鏈接的初始顏色 */
}

a:hover {
  text-decoration: underline; /* 鼠標(biāo)懸停時添加下劃線 */
  color: red; /* 鼠標(biāo)懸停時改變顏色 */
}
</style>
</head>
<body>

<a href="#">這是一個鏈接</a>

</body>
</html>

在上面的代碼中，當(dāng)鼠標(biāo)懸停在鏈接上時，鏈接的文本裝飾樣式會改變，包括添加下劃線和改變顏色。通過使用:hover偽類，可以在鼠標(biāo)懸停時應(yīng)用新的樣式。

0 踩