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

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

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

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

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

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

当给页面的button进行重新定义样式的时候，有一点需要注意，就是如果使用background-imge来将图片作为按钮的背景的时候，如果同时你为按钮的border也设定了宽度和颜色，你会发现，在按钮背景与边框中间有大约1px的一个内侧边框，而如果你直接设定background-color的时候，就不会有这样的问题，所以，如果你想为新的按钮添加一个特殊颜色的边框，但又不想被这个内侧的边框影响的话，只需要变通地把background-color也设置为与border的颜色一致，就可以达到效果啦，当然，你可以将border的宽度减少1px，因为内侧边框也是有宽度的哦。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<button>标签中，加入样式代码：style="background: url(small2.png)width:150pxheight:60px"。

3、浏览器运行index.html页面，此时按钮被成功添加了图片。

---