如何使用 CSS 更改悬停图像?

cssweb developmentfront end technology更新于 2025/3/9 21:00:17

"hover"伪类用于在用户将鼠标悬停在 HTML 元素上时选择并应用样式。

使用 CSS 更改悬停图像非常简单，可以为网站增添额外的交互性。在这里，我们将逐步学习如何使用 CSS 更改悬停图像 -

准备图像

使用 CSS 更改悬停图像的第一步是准备好要使用的两张图片:默认图片和悬停图片。确保这两张图片都已保存在您的网站上，并且您知道每张图片的 URL。

将默认图片添加到您的 HTML 文件中

使用 img 标签并指定图片的来源 (src)。例如 -

<img src="default-image.jpg" alt="default">

在 CSS 中添加悬停规则

在 CSS 文件中，我们添加了一条规则，用于在悬停时更改图像。我们将通过定位 div 标签并指定 :hover 伪类来实现。例如 -

img:hover {
    content: url("hover-image.jpg");
}

示例

这是一个使用 CSS 在悬停时更改图像的示例。

<html>
<head>
   <title>Change Image on Hover in CSS</title>
   <style>
      body{ 
         text-align:center;
      }
      div {
         width: 250px;
         height: 195px;
         background:
         url("https://www.cainiaomax.com/dip/images/black_and_white.jpg") norepeat;
         display: inline-block;
      }
      div:hover {
         background:
         url("https://www.cainiaomax.com/dip/images/einstein.jpg") no-repeat;
      }
   </style>
</head>
<body>
   <h2>Change Image on Hover Using CSS</h2>
   <div class="card"></div>
</body>
</html>