HTML中实现鼠标滑过背景变色教程：轻松掌握:hover样式

网页中怎样实现鼠标滑过内容背景变色

在很多网页中，我们都看到过，当鼠标滑过一段内容时，该内容的背景会发生颜色变化。
要设置鼠标滑过时背景颜色改变，只需使用:hover即可设置成功。

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

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

在html文件上找到body标签，在这个标签中创建一个div标签，并将class设置为bg。
如图：代码：divclass="bg"/div

在title标签后创建style标签，为bg类添加样式。
这里我们为bg类设置宽度、高度和背景颜色。
如图代码所示：styletype="text/css".bg{width:150px;height:150px;background-color:red;}/style

设置鼠标滑过div背景颜色改变。
在bg样式类中添加mouserollover:hover，然后设置鼠标滑过时的背景颜色。
如图，代码：.bg:hover{background-color:burlywood;}

打开一个实用的浏览器。
保存html后，用浏览器打开。
当鼠标没有滑过div时背景为红色。
当鼠标滑过div时，背景从红色变为棕色。
，

所有代码可以直接复制到新家的html文件中。
保存后用浏览器打开看看效果。
如图：全部代码：!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title鼠标滑过背景变色/titlestyletype="text/css".bg{width:150px;height:150px;background-color:红色;}.bg:hover{background-color:burlywood;}/style/headbodydivclass="bg"/div/body/html

html点击连接后变色

1.创建一个新的HTML文件。

2在HTML文件中找到body标签，在标签内部创建一个div标签，并将class设置为BG。

3.在标题标签后创建一个样式标签，以将样式添加到BG类中。
设置BG类的宽度、高度和背景颜色。

4设置鼠标移到Div上时背景颜色发生变化。
添加鼠标轮廓：将鼠标指针移至BG样式类，并设置鼠标指针的背景颜色。

5打开工具浏览器。
保存HTML并使用浏览器打开它。
当鼠标没有移到Div上时，背景为红色。
当鼠标移到Div上时，背景从红色变为棕色。

6所有代码都可以直接复制到新网站的HTML文件中。
保存后可以用浏览器打开看看效果。

html中鼠标放上去怎么可以变色

text