[分享]css中 鼠标点击后样式改变

CSS中，我们可以通过鼠标点击来改变元素的样式。这主要通过使用伪类（:active）实现。

.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.btn:active {
  background-color: #0062cc;
} 

上面的代码展示了一个按钮元素的样式定义，当我们点击这个按钮时，它的背景色会从#007bff变成#0062cc。这是因为我们在.btn类中定义了:active伪类，它会覆盖默认状态下的样式。

除了改变背景色，我们还可以改变其他样式，比如字体颜色、边框等。

.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: none;
}

.btn:active {
  background-color: #0062cc;
  color: #fff;
  border: 1px solid #0062cc;
} 

上面的代码展示了一个带有边框的按钮元素。当我们点击按钮时，它的边框会从无变成1px的蓝色实线边框。

通过使用伪类，我们可以实现更丰富的交互效果，给用户更好的体验。同时，我们也要注意到，伪类只在元素处于对应状态时才生效，如按钮需要被点击才能改变样式。