text-decoration如何配合hover使用

avatar
作者
筋斗云
阅读量: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伪类,可以在鼠标悬停时应用新的样式。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!