CSS 如何通过悬停更改图像

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

使用CSS在悬停时更改图像是一个简单的过程，可以给网站添加额外的交互性。在这里，我们将逐步学习使用CSS在悬停时更改图像的指南 –

准备图像

使用CSS在悬停时更改图像的第一步是拥有两个要使用的图像：默认图像和悬停图像。确保这两个图像都保存在您的网站上，并且您知道每个图像的URL。

将默认图像添加到您的HTML中

使用img标签并指定图像的源（src）。例如 –

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

在CSS中添加悬停规则

在CSS文件中，我们通过将规则添加到:hover伪类来实现在悬停时改变图像。例如，我们可以通过针对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.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
         display: inline-block;
      }
      div:hover {
         background:
         url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
      }
   </style>
</head>
<body>
   <h2>Change Image on Hover Using CSS</h2>
   <div class="card"></div>
</body>
</html>