HTML-鼠标悬浮文案效果

在HTML中，可以使用CSS的伪类:hover来实现鼠标悬浮时的文案效果。以下是一个简单的示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬浮效果示例</title>
<style>
.hover-effect:hover {
    color: #FFD700; /* 悬浮时文字颜色改变 */
    transition: color 0.5s; /* 颜色变化过渡效果 */
}
</style>
</head>
<body>
 
<h1 class="hover-effect">鼠标悬浮我试试</h1>
 
</body>
</html>

在这个示例中，当鼠标悬浮在带有hover-effect类的<h1>元素上时，文本颜色会平滑地改变成黄色（#FFD700），并且这个颜色变化的过渡效果持续0.5秒。

HTML-鼠标悬浮文案效果

评论已关闭

推荐阅读