css修改鼠标悬停时的样式

在CSS中，你可以通过`:hover`伪类来修改元素在鼠标悬停时的样式。`:hover`是一个伪类选择器，用于指定用户鼠标指针悬停在一个元素上时应用的样式。下面是一些基本的示例：

1. 颜色、背景颜色和边框：

button:hover {
  background-color: #ff69b4; /* 悬停时背景变为粉色 */
  color: white; /* 文本颜色变白 */
  border: 2px solid #f00; /* 边框变为红色 */
}

2. 图像效果：

a:hover img {
  opacity: 0.8; /* 图片透明度降低 */
  filter: grayscale(100%); /* 图片转灰 */
}

3. 文字大小或样式变化：

p:hover {
  font-size: 18px; /* 悬停时字体增大 */
  text-decoration: underline; /* 添加下划线 */
}

4. 动画效果：

div:hover {
  transform: scale(1.1); /* 悬停时元素放大 */
  transition: all 0.3s ease; /* 加入平滑过渡效果 */
}

要应用这些样式，只需要将上面的CSS规则放在对应元素的选择器之后即可。例如，如果你想给所有按钮（`<button>`）的悬停效果添加规则，就直接在`.button`类中添加`hover`样式。