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

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

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

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

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

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

HTML button按钮的边框样式与颜色都是可以修改的，用基本的HTML语法难以设计出美轮美奂的按钮风格，透过CSS却可以很容易的办到，在本篇HTML button按钮边框样式与颜色的修改介绍中，我们将会用到CSS border属性其中的边框样式（border-style）以及边框颜色（border-color）来制做，当然按钮本身的宽度（width）与高度（height）也必须搭配使用，无论是button还是submit按钮都可以用这样的技巧，但不同的浏览器可能会有一点点小小的差异，这跟浏览器本身有关系，设计按钮的css效果时，通常要多用几个浏览器测试。

范例一、HTML button按钮边框样式与颜色

呈现结果

范例二延续范例一的程式码，增加了background-color 的属性，替按钮增加背景颜色，这里为了让范例比较简洁一点，所以背景颜色都是用粉红色（pink）呈现，你也可以自己修改为其他不同的背景颜色。

1、打开DreamWeaver新建一个html文件。

2、在body标签中加入文字，或者在body标签内添加其它标签并加入文字。

3、在标签中加入stlye,同时设置颜色color为个人需要的颜色。个人所设置的颜色为红色，同时个人可用英文进行设置字体颜色。如果对于颜色有要求，可通过取色器工具取色，查看颜色的RGB是多少输入相应数字也可。

4、个人在进行预览颜色时，需要先将文件进行保存，可放在个人想要放在位置。同时，需对文件进行命名。命名保存后，上方同时会修改成个人所命名的。

5、一切做好之后，个人可通过浏览器进行浏览，同时可查看个人的浏览器列表进行添加其它浏览器。如果所提示的浏览器个人电脑中并未安装，同样会提示个人电脑中并未有该软件，需重新选择其它的。

6、选择好预览的浏览器后，可在浏览器进行预览，即可查看到个人设置的字体颜色为红色。如果使用其它标签，同样是对标签添加style进行颜色编辑，即可显示该颜色的字。