div css 鼠标悬停在div层上时，div背景色改变

要实现鼠标悬停在 div 层上时，div 的背景色改变，有以下几个步骤：

1. 选中 div 元素
2. 添加:hover 伪类
3. 设置背景色

下面是完整的实现步骤：

Step 1：选中 div 元素

首先，我们需要在 HTML 中选中你要实现功能的 div 元素。你可以通过以下的 HTML 代码来创建一个 div 元素：

<div class="myDiv">鼠标悬停时颜色会变</div>

这里的 .myDiv 是一个类选择器，通过添加类名，可以方便我们选中所有具有相同样式的元素。

Step 2：添加:hover 伪类

:hover CSS 伪类代表鼠标悬停时元素的状态。我们可以使用 :hover 选择器，来在鼠标悬停时设置样式。

.myDiv:hover {
  /* 设置鼠标悬停时的样式 */
}

Step 3：设置背景色

添加了:hover 伪类后，我们可以在其中设置需要改变的样式，来实现鼠标悬停时 div 背景色改变的效果。

.myDiv:hover {
  background-color: red;
}

在这个例子中，当鼠标悬停在 myDiv 元素上时，元素的背景色将会变成红色。

以下是具体的两个示例：

示例一

<div class="myDiv1">鼠标悬停时背景色变红</div>

.myDiv1:hover {
  background-color: red;
}

这个示例中，当鼠标悬停在 myDiv1 元素上时，元素的背景色将会变成红色。

示例二

<div class="myDiv2">鼠标悬停时背景色变绿</div>

.myDiv2:hover {
  background-color: green;
}

这个示例中，当鼠标悬停在 myDiv2 元素上时，元素的背景色将会变成绿色。