完全用CSS实现鼠标移动到图片并更换图片

沃梦达教程前端开发

2024-01-05 11

要完全用CSS实现鼠标移动到图片并更换图片，需要用到CSS的:hover选择器和background-image属性。

要完全用CSS实现鼠标移动到图片并更换图片，需要用到CSS的:hover选择器和background-image属性。

具体步骤如下：

准备两个需要交替的图片。例如，我们使用红色和蓝色两张图片作为示例，存放在项目文件夹中。
在HTML中创建一个div容器，并将其中一个图片作为背景图片设置。例如：

<div class="image-container"></div>

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('red-image.jpg');
}

添加:hover选择器来实现鼠标悬停时更换背景图片。例如：

.image-container:hover {
  background-image: url('blue-image.jpg');
}

此时，当鼠标悬停在这个div容器上时，就会将红色图片替换为蓝色图片。

示例1：完全用CSS实现鼠标悬停更换图片

这是一个完整的示例代码，实现了鼠标悬停更换图片的效果：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Hover Image Change</title>
  <style>
    .image-container {
      width: 300px;
      height: 200px;
      background-image: url('red-image.jpg');
    }

    .image-container:hover {
      background-image: url('blue-image.jpg');
    }
  </style>
</head>

<body>
  <div class="image-container"></div>
</body>
</html>

示例2：完全用CSS实现鼠标悬停更换图片，加上过渡效果

如果希望更换图片时增加一些过渡效果，可以在CSS中添加transition属性。例如：

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('red-image.jpg');
  transition: background-image 0.5s ease;
}

.image-container:hover {
  background-image: url('blue-image.jpg');
}

这里的transition属性表示在0.5秒的时间内，将background-image属性从原来的值过渡到:hover时指定的新值。过渡效果的类型为ease，即缓入缓出的效果。

这是一个完整的示例代码，实现了鼠标悬停更换图片并加上过渡效果的效果：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Hover Image Change with transition</title>
  <style>
    .image-container {
      width: 300px;
      height: 200px;
      background-image: url('red-image.jpg');
      transition: background-image 0.5s ease;
    }

    .image-container:hover {
      background-image: url('blue-image.jpg');
    }
  </style>
</head>

<body>
  <div class="image-container"></div>
</body>
</html>