html鼠标悬浮在按钮上,让按钮背景变色

1、首先创建一个新的html文件，如图所示。

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

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

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

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

要是想要全部显示可以在盒子宽高有设置时可以直接写background-size:100%；

要不是有具体像素要求也可以直接写成background-size:30px 20px

但是在IE9以下IE系列浏览器是不兼容，假如需要兼容IE版本，最好是通过PS修改图片大小。

（纯手打，求采纳 梦魂清风 @author：dream breeze）！

一、创建一个新的HTML文件。

二、在HTML文件中找到body标记，在标记中创建一个div标记，并将类设置为BG。

三、在title标记之后创建一个样式标记，以将样式添加到BG类。为BG类设置宽度、高度和背景色。

四、将背景颜色设置为在鼠标移动到Div上时更改。添加鼠标悬停：将鼠标悬停到BG样式类，然后在鼠标悬停时设置背景颜色。

五、实用程序浏览器打开。保存HTML并用浏览器打开它。当鼠标不在Div上移动时，背景是红色的。当鼠标在Div上移动时，背景从红色变为棕色。

六、所有代码都可以直接复制到新主页的HTML文件中。保存后，可以使用浏览器打开它以查看效果。

---