实现鼠标放置在无序列表上文字可以变色
时间: 2024-09-14 13:16:04 浏览: 35
在HTML和CSS中,你可以使用`:hover`伪类来实现鼠标悬停时列表文字颜色的变化效果。下面是一个简单的例子,展示如何做到这一点:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
ul.color-change {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.color-change li a {
color: black; /* 设置初始颜色 */
transition: color 0.3s ease; /* 添加过渡效果,使颜色变化平滑 */
}
ul.color-change li a:hover {
color: red; /* 当鼠标悬停时,颜色变为红色 */
}
</style>
</head>
<body>
<ul class="color-change">
<li><a href="#">商品1</a></li>
<li><a href="#">商品2</a></li>
<li><a href="#">商品3</a></li>
</ul>
</body>
</html>
```
在这个示例中,当鼠标移到列表项的文字上时,链接的颜色会变为红色,移开后会在一定时间内恢复到原始颜色。