教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 288 CSS
css设置鼠标滑过背景变色;鼠标滑过背景变色
来源：互联网
2023-03-16 19:17:43 532
在很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到 :hover 即可设置成功。
语法: div:hover{background-color: red;}
方法/步骤
创建一个新的html文件。如图
在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg 。 如图：
代码：div class="bg">/div>
在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。 如图
代码：
style type="text/css">
.bg{
width: 150px;
height: 150px;
background-color: red;
}
/style>
设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。如图
代码：
.bg:hover{
background-color: burlywood;
}
实用浏览器打开。保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。、
所有代码，可把所有代码直接复制到新家的html文件上，保存好后用浏览器打开即可看到效果。如图：
所有代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>鼠标滑过背景变色/title>
style type="text/css">
.bg{
width: 150px;
height: 150px;
background-color: red;
}
.bg:hover{
background-color: burlywood;
}
/style>
/head>
body>
div class="bg">/div>
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：CSS3制作各种形状图像 下一篇：css设置鼠标滑过字体变色
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 440 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 285 CSS