HTML div 鼠标悬停时背景颜色变化

在本文中，我们将介绍如何通过使用HTML和CSS实现当鼠标悬停在div元素上时，改变其背景颜色。

阅读更多：HTML 教程

1. 基本结构

首先，我们需要创建一个基本的HTML结构。在HTML文件中，我们创建一个div元素并为其添加一个唯一的id属性。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML div 鼠标悬停时背景颜色变化</title>
    <style>
      #div-hover {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="div-hover"></div>
  </body>
</html>

以上代码中，我们创建了一个宽度和高度均为200px的蓝色div元素，并给其指定了id属性为”div-hover”。

2. 使用CSS实现背景颜色变化

接下来，我们将使用CSS来实现当鼠标悬停在div元素上时改变其背景颜色的效果。我们可以通过:hover伪类选择器来实现这个效果。

<style>
  #div-hover {
    width: 200px;
    height: 200px;
    background-color: blue;
  }

  #div-hover:hover {
    background-color: red;
  }
</style>

在上述代码中，我们使用了:hover伪类选择器来选择具有id为”div-hover”的元素，并定义了鼠标悬停时的样式，将背景颜色改为红色。

现在，当鼠标悬停在div元素上时，我们会看到背景颜色从蓝色变为红色。

3. 添加过渡效果

我们可以通过CSS中的transition属性来为颜色变化添加一个过渡效果，使颜色变化更加平滑。

<style>
  #div-hover {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition: background-color 0.5s ease;
  }

  #div-hover:hover {
    background-color: red;
  }
</style>

在上述代码中，我们给div元素的transition属性添加了background-color属性，并指定了过渡时间为0.5秒，过渡效果为ease。

现在，当我们将鼠标悬停在div元素上时，我们会看到背景颜色会平滑地从蓝色过渡到红色。

4. 结合JavaScript实现动态变化

除了使用CSS之外，我们还可以结合JavaScript来实现更多的交互效果。下面是一个使用JavaScript实现动态变化的示例。

<style>
  #div-hover {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition: background-color 0.5s ease;
  }
</style>

<script>
  var divHover = document.getElementById("div-hover");

  divHover.addEventListener("mouseover", function() {
    this.style.backgroundColor = "red";
  });

  divHover.addEventListener("mouseout", function() {
    this.style.backgroundColor = "blue";
  });
</script>

在上述代码中，我们使用JavaScript获取了具有id为”div-hover”的元素，然后为其添加了两个事件监听器，分别处理鼠标悬停和移出的事件。当鼠标悬停时，我们将div元素的背景颜色改为红色；当鼠标移出时，背景颜色改回蓝色。

这样，我们就实现了一个动态变化的效果。