鼠标按住 CSS 效果

在网页设计和开发中，有时需要在用户鼠标按住某个元素时触发 CSS 效果，例如改变该元素的颜色、位置、大小等。本文将介绍通过 CSS 实现鼠标按住效果的方法。

:active 伪类选择器

:active 伪类选择器用于匹配被用户激活的元素，通常是在用户按下并松开鼠标左键期间。可以用它来实现鼠标按住效果。

改变元素颜色

可以通过改变背景颜色或文本颜色来实现鼠标按住效果。代码如下：

a:active {
  background-color: yellow;
  color: red;
}

以上代码会在用户按下并松开鼠标左键期间，将链接背景颜色设为黄色，文本颜色设为红色。

改变元素位置

可以通过在 :active 伪类选择器中修改元素的 position 和 top/left 属性来实现改变元素位置的效果。代码如下：

button:active {
  position: relative;
  top: 5px;
  left: 5px;
}

以上代码会在用户按下并松开鼠标左键期间，将按钮向右下方移动 5 个像素。

改变元素大小

可以通过在 :active 伪类选择器中修改元素的 width 和 height 属性来实现改变元素大小的效果。代码如下：

div:active {
  width: 200px;
  height: 200px;
}

以上代码会在用户按下并松开鼠标左键期间，将 div 元素的宽度和高度都设为 200 像素。

小结

通过 :active 伪类选择器，我们可以在用户鼠标按住某个元素时触发 CSS 效果，从而提高网页的交互体验和用户友好性。