[分享]css中字体颜色点击变换

发布于 2024-11-11 19:16:58

CSS中的字体颜色可以通过点击进行变换。这是一个非常有用的功能，可以让网站更加生动有趣。以下是如何实现的：html{ fontsize: 16px; } p{ color: blue; } p:hov...

CSS中的字体颜色可以通过点击进行变换。这是一个非常有用的功能，可以让网站更加生动有趣。以下是如何实现的：

html{
  font-size: 16px;
}

p{
  color: blue;
}

p:hover{
  color: red;
}

p:active{
  color: green;
}

上述代码中，我们定义了一个段落元素的样式，当鼠标指向它的时候，字体颜色会变成红色；当点击它的时候，字体颜色会变成绿色。

需要注意的是，:active伪类只有在点击时才生效，而不是在鼠标按下时就触发。如果您需要实现鼠标按下时就改变颜色的效果，可以尝试使用JavaScript来达到目的。如下面这个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>改变字体颜色</title>
  <style>
    p{
      font-size: 20px;
      color: blue;
      cursor: pointer;
    }
    p:active{
      color: red;
    }
  </style>
  <script>
    function changeColor(){
      var p = document.getElementsByTagName("p")[0];
      p.style.color = "green";
    }
  </script>
</head>
<body>
  <p onclick="changeColor()">点击改变字体颜色</p>
</body>
</html>

以上代码中，我们定义了一个段落元素，并通过JavaScript给它添加了一个onclick事件。当用户点击这个元素时，它的字体颜色将会变成绿色。

css 教程