CSS中hover有哪些常见用法

在CSS中，hover伪类选择器用于为鼠标悬停在元素上时的元素应用样式。以下是一些常见的hover用法：

1. 改变颜色：

a:hover {
  color: red;
}

当鼠标悬停在链接上时，链接的颜色会变为红色。

2. 改变背景颜色：

button:hover {
  background-color: blue;
}

当鼠标悬停在按钮上时，按钮的背景颜色会变为蓝色。

3. 显示隐藏元素：

div:hover #hidden-element {
  display: block;
}

当鼠标悬停在div元素上时，会显示ID为hidden-element的元素。

4. 改变尺寸：

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

当鼠标悬停在div元素上时，div的尺寸会变为200px x 200px。

5. 添加过渡效果：

a:hover {
  color: red;
  transition: color 0.3s ease;
}

当鼠标悬停在链接上时，链接的颜色会在0.3秒内平滑地过渡到红色。

6. 鼠标移出时恢复原状：

a:hover, a:hover:after {
  color: blue;
}
a:hover:after {
  content: " (hover me)";
}
a:not(:hover):after {
  content: "";
}

当鼠标悬停在链接上时，链接的文字颜色会变为蓝色，并显示" (hover me)“。当鼠标移出链接时，文字颜色恢复为原色，同时” (hover me)"也会消失。

这些只是hover的一些基本用法，实际上hover可以与其他CSS属性和选择器结合使用，实现更丰富的交互效果。