温馨提示×

text-decoration如何配合hover使用

小樊
96
2024-06-19 09:30:54
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要配合hover使用text-decoration,可以通过CSS来实现。例如,当鼠标悬停在一个链接上时,可以改变链接的文本装饰样式,比如改变颜色、下划线等。

以下是一个示例代码:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none; /* 初始状态下去掉链接的下划线 */
  color: blue; /* 链接的初始颜色 */
}

a:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
  color: red; /* 鼠标悬停时改变颜色 */
}
</style>
</head>
<body>

<a href="#">这是一个链接</a>

</body>
</html>

在上面的代码中,当鼠标悬停在链接上时,链接的文本装饰样式会改变,包括添加下划线和改变颜色。通过使用:hover伪类,可以在鼠标悬停时应用新的样式。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:text-decoration和text-decoration-line区别

0