css鼠标悬停背景变色
时间: 2023-08-09 22:07:27 浏览: 249
CSS鼠标悬停图片上图片变灰 变色 半透明
可以通过CSS中的:hover伪类来实现鼠标悬停时背景变色的效果。下面是一个示例代码:
HTML:
```
<div class="hover-div">鼠标悬停时背景变色</div>
```
CSS:
```
.hover-div {
background-color: #ccc;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.hover-div:hover {
background-color: #f00; /* 鼠标悬停时的背景颜色 */
}
```
在上面的代码中,我们使用.hover-div类来定义一个div元素,并设置初始背景颜色为#ccc。通过:hover伪类,我们可以在鼠标悬停时将背景颜色修改为#f00。同时,我们还添加了一个过渡效果,使背景颜色的变化更加平滑。
你可以根据自己的需要修改背景颜色和过渡效果的时间。希望对你有帮助!如果还有其他问题,请继续提问。
阅读全文