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

要使用 CSS 更改鼠标悬停时的图像，我们将使用 :hover 伪类。在本文中，我们讨论了两种不同的方法来使用 CSS 属性更改鼠标悬停时的图像。

我们的 HTML 文档中有一张图像，我们的任务是在将鼠标悬停在图像上时更改图像。

更改鼠标悬停时图像的方法

以下是本文将讨论的使用 CSS 更改鼠标悬停时图像的方法列表，其中包含分步说明和完整的示例代码。

使用 background 属性更改鼠标悬停时的图像

为了使用 CSS 更改鼠标悬停时的图像，我们使用了 background 属性和 :hover 伪类。

  • 我们使用了 **container** 类来将图像的 div 内容放置在中心，使用 flex 和 justify-content 属性。
  • 然后，在第二步中，我们使用 **card** 类使用 **background** 属性插入图像，并使用 CSS height 和 width 属性设置其尺寸。
  • 最后一步，我们使用了 **".card:hover"**，它在鼠标悬停在第二步中插入的图像上时更改图像。

示例

这是一个完整的示例代码，实现了上述步骤，使用 **background** 属性使用 CSS 更改鼠标悬停时的图像。

<html>
<head>
   <title>
      To change image on hover with CSS
   </title>
   <style>
      .container {
         display: flex;
         justify-content: center;
      }
      .card {
         width: 350px;
         height: 195px;
         background:url("/plsql/images/plsql-mini-logo.jpg") 
                    no-repeat;
         display: inline-block;
      }
      .card:hover {
         background:
            url("/html/images/test.png") no-repeat;
      }
   </style>
</head>
<body>
   <h3>
      Changing Image On Hover With CSS
   </h3>
   <p>
      In this example we have used CSS <strong>
      :hover</strong> psuedo-class with 
      <strong>background</strong> property to 
      change image on hover with CSS.
   </p>
   <div class="container">
      <div class="card"></div>
   </div>
</body>
</html>

使用 content 属性更改鼠标悬停时的图像

在这种使用 CSS 更改鼠标悬停时图像的方法中，我们使用了 CSS content 属性和 :hover 伪类，该伪类在鼠标悬停在图像上时将其作为目标。

  • 我们使用了 **container** 类来将图像的 div 内容放置在中心，使用 flex 和 justify-content 属性。
  • 然后，在第二步中，我们使用 **card** 类使用 **content** 属性插入图像。
  • 最后一步，我们使用了 **".card:hover"**，它使用 CSS **content** 属性更改鼠标悬停在图像上时的图像。

示例

这是一个完整的示例代码，实现了上述步骤，使用 **content** 属性使用 CSS 更改鼠标悬停时的图像。

<html>
<head>
   <title>
      To change image on hover with CSS
   </title>
   <style>
      .container {
         display: flex;
         justify-content: center;
      }
      .card {
         content:url("/plsql/images/plsql-mini-logo.jpg");
      }
      .card:hover{
         content:
            url("/html/images/test.png");
      }
   </style>
</head>
<body>
   <h3>
      Changing Image On Hover With CSS
   </h3>
   <p>
      In this example we have used CSS <strong>
      :hover</strong> psuedo-class with 
      <strong>content</strong> property to 
      change image on hover with CSS.
   </p>
   <div class="container">
      <div class="card"></div>
   </div>
</body>
</html>

结论

在本文中，我们了解了如何使用 CSS 更改鼠标悬停时的图像。我们讨论了两种不同的方法来使用 CSS 更改鼠标悬停时的图像：使用 **background** 属性以及 **:hover** 伪类，以及使用 **content** 属性。我们可以使用以上两种方法中的任何一种。

更新于：2024年8月28日

2万+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告