查看代码后鼠标图标形状变化,变成了下划线
时间: 2024-09-13 19:17:25 浏览: 63
基于SVG的超链接鼠标悬停下划线动画特效
在HTML和CSS中,`a`标签的伪类样式可以控制鼠标悬停(`:hover`)时的行为。如果你在CSS中设置了`a:hover`部分,例如:
```css
/* a标签鼠标经过时的样式 */
a:hover {
cursor: pointer; /* 显示为小手形状 */
color: green; /* 文本颜色变为绿色 */
text-decoration: underline; /* 添加下划线 */
}
```
当你在浏览器中浏览页面,当鼠标移动到带有这些样式的链接上时,文本颜色会变为绿色并显示下划线,鼠标指针也会变成一个小手形状(`cursor: pointer`)。这样,用户可以通过鼠标形状的变化识别可点击区域。
要查看这个效果,你可以创建一个简单的HTML文档,并添加如下CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a {
color: red;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#">Hover me for an example</a>
</body>
</html>
```
打开此页面,鼠标悬停在链接上,你会看到颜色和指针的变化。
阅读全文