css怎么加hover效果

在网页设计中，hover（悬停）效果是非常重要的一个设计元素，它可以给用户提供更好的互动体验。在 CSS 中，我们可以使用:hover 伪类来实现这个悬停效果。

首先，我们需要选择需要添加悬停效果的元素，例如一个按钮：

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

然后，在我们想要的地方添加:hover 伪类，例如在按钮的样式中：

.button:hover {
  background-color: #008CBA;
}

这样就可以在悬停时改变按钮的背景颜色，从而实现悬停效果了。

如果我们想要同时改变文字颜色，可以这样实现：

.button:hover {
  background-color: #008CBA;
  color: white;
}

这样当鼠标悬停在按钮上时，不仅仅改变背景颜色，同时也会改变文字颜色。

此外，:hover 伪类也可以应用于其他元素，比如图片：

img:hover {
  transform: scale(1.1);
}

这样就可以在悬停时对图片进行放大的效果。

总之，使用 CSS 的 :hover 伪类可以非常方便地给网页添加悬停效果，从而提供更好的用户体验。