如何使用 CSS 更改悬停时的图像？

在网页设计中，悬停效果是常见的一种交互方式。当鼠标悬停在图像上时，我们希望图像能够有所改变，比如出现阴影或者是显示其它的图像。在本文中，我们将讨论如何使用 CSS 来实现这种效果。

在 HTML 中添加图像

在开始之前，我们需要在 HTML 文件中添加一个图像。我们可以使用 <img> 标签来添加图像，如下所示：

<img src="https://example.com/image.png" alt="My Image">

上述代码将会在页面中添加一张名为 image.png 的图像，并且为这个图像添加了一个备用文本 My Image。备用文本主要用于当图像无法加载时，可以在页面上显示一段描述性文本，以便于让用户知道这个位置是由一张图像占据的。

使用 CSS 来添加悬停效果

当用户悬停在图像上时，我们想要让图像产生某种改变。我们可以通过添加一些 CSS 样式来实现这个效果。

我们可以使用 :hover 伪类来为图像添加悬停效果。例如，我们可以添加一个阴影效果：

img:hover {
  box-shadow: 0px 0px 5px #999;
}

上述代码的意思是，在用户悬停在图像上时，将图像的阴影增加到 5 像素，并且调整阴影的颜色为灰色。

同样的，我们也可以为图像添加一个 hover 后的背景图像：

img:hover {
  background-image: url("https://example.com/hover-image.png");
}

上述代码的意思是，当用户悬停在图像上时，将显示一个名为 hover-image.png 的图片。

总结

在本文中，我们讨论了如何使用 CSS 来添加悬停效果。我们可以使用 :hover 伪类来选择图像，并且添加一些我们想要的效果（如阴影或者背景图像）。这样做可以为我们的页面增加一些动态交互效果，让用户更好的使用网页。