点击div改变背景颜色的css|极客教程

点击div改变背景颜色的css

在网页开发中，经常会遇到需要点击一个元素来触发一些交互效果的场景。其中，点击一个div元素来改变其背景颜色是一个常见的需求。本文将详细讨论如何通过CSS实现点击div改变背景颜色的效果。

方法一：使用`:active`伪类

:active 伪类表示元素被用户激活时的状态。在这种状态下，我们可以改变元素的样式，例如背景颜色。通过利用:active伪类，我们可以实现点击div改变背景颜色的效果。

div:active {
  background-color: red;
}

在上面的代码中，当用户点击div元素时，该元素的背景颜色会变为红色。这种方法的好处是简单直接，但缺点是只有在用户点击的瞬间才会看到效果，释放鼠标后背景颜色会恢复原样。

方法二：结合`:hover`和`:active`伪类

为了让点击div后背景颜色保持改变，我们可以结合使用 :hover 和 :active 伪类。

div:hover {
  background-color: blue;
}

div:active {
  background-color: red;
}

在这段代码中，当鼠标悬停在 div 上时，背景颜色会变为蓝色；当用户点击 div 时，背景颜色会变为红色。这样就实现了点击 div 改变背景颜色并保持效果的目的。

方法三：使用JavaScript

如果希望点击 div 元素后背景颜色可以保持改变，可以借助JavaScript来实现。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
  #myDiv {
    width: 200px;
    height: 200px;
    background-color: blue;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="myDiv" onclick="changeColor()"></div>
<script>
  function changeColor() {
    var div = document.getElementById("myDiv");
    div.style.backgroundColor = "red";
  }
</script>
</body>
</html>

在这段代码中，我们通过JavaScript为 div 元素绑定了 onclick 事件，当用户点击 div 时，会触发 changeColor() 函数，将背景颜色改变为红色。