如何将“背景图像”添加到“img”标签并在鼠标悬停时切换显示？

Question

我有一个像这样的img 标签（而且我不能使用容器）

<img src="https://example.com/first-image.jpg" class="my-image">

我想在鼠标悬停时仅使用 CSS 显示第二张图像而不是第一张图像。也许做这样的事情：

.my-image:hover {
    background-image: url("https://example.com/second-image.jpg");
}

我不确定这是否可能。有什么想法吗？

Answer 1

方案一：可以编辑HTML

您可以不使用 src 属性并在 CSS 中设置默认图像，然后在悬停时更改它，如下所示：

.my-image {
  width: 200px;
  height: 200px;
  background-image: url(https://....jpg);
  background-size: cover;
  background-position: center;
}
.my-image:hover {
  background-image: url(https://....jpg);
}

在此处查看工作示例：https://jsfiddle.net/86ujL1dv/

请注意，现代浏览器在需要时才会加载图片，因此第一次悬停时会有一点延迟，因为用户的浏览器会加载第二张图片。

解决方案 2：无法编辑 HTML

这有点小技巧，但您可以将 img 的大小设置为零，并使用填充使其看起来相同，然后使用 background-image 属性，如下所示：

.my-image {
  width: 200px;
  height: 200px;
}
.my-image:hover {
  width: 0;
  height: 0;
  padding: 100px;
  background-size: cover;
  background-position: center;
  background-image: url(https://images.pexels.com/photos/4017166/pexels-photo-4017166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

在此处查看实时示例：https://jsfiddle.net/1bo7L89w/