css设置鼠标滑过背景变色_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 3:28:14 共计：3587 浏览

css设置鼠标滑过背景变色？

很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到 :hover 就可以设置成功。

语法: div:hover{background-color: red;}

1.创建一个新的html文件。如图

2.在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg 。如图：

代码：<div class="bg"></div>

3.在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。如图

代码：

.bg{

width: 150px;

height: 150px;

background-color: red;

}

</style>

4.设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。如图

代码：

.bg:hover{

background-color: burlywood;

}

5.实用浏览器打开。保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色

6.所有代码，可把所有代码直接复制到新家的html文件上，保存好后用浏览器打开即可看到效果。如图：

所有代码：

<!DOCTYPE html>

<html>

<head>

<title>鼠标滑过背景变色</title>

.bg{

width: 150px;

height: 150px;

background-color: red;

}

.bg:hover{

background-color: burlywood;

}

</style>

</head>

<body>

</body>

</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。