要求鼠标覆盖时添加下划线和改变字体
时间: 2024-09-14 09:16:08 浏览: 10
在HTML和CSS中,你可以通过设置`text-decoration`属性来给文本添加下划线,并通过`font-family`属性来更改字体。当你需要在鼠标悬停时动态添加这些样式时,可以结合`:hover`伪类一起使用。这里有一个简单示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.text-effect {
text-decoration: none; /* 初始状态下没有下划线 */
font-family: Arial, sans-serif; /* 初始字体 */
}
.text-effect a {
transition: text-decoration 0.3s ease, font-family 0.3s ease; /* 添加过渡效果 */
}
.text-effect a:hover {
text-decoration: underline; /* 鼠标悬停时添加下划线 */
font-family: 'Times New Roman', Times, serif; /* 更改字体为Times New Roman */
}
</style>
</head>
<body>
<a href="#" class="text-effect">鼠标悬停看变化</a>
</body>
</html>
```
在这个例子中,只有当鼠标悬停在链接上时,文字下方才会出现下划线,并且字体将变为Times New Roman。鼠标离开后,样式会恢复到原来的设置。