使用悬停将一张图片替换为另一张图片

Question

我有这个代码

<div class="mix category-1">

<a href="img/holder-01-large.png" class="photo">

<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>

<a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Primer montaze</a>

<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>

</div>

我想在将鼠标悬停在具有相同尺寸的图像上时替换此 holder-01-small.png。不触及此 HTML 代码，仅使用 CSS 是否可能？

Answer 1

是的，这是可能的，但不能使用您提供的方法。相反，创建一个 div（在这里使用 img 标签意味着我们需要一个透明图像作为占位符，而 div 就可以了）

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

并且在 css 中尝试类似下面的内容，您需要指定高度和宽度，因为 div 从技术上讲是空的，否则它会自行折叠。

.image {
    background-image: url("path-to-file");
    height: xx;
    width: yy;
}

.image:hover {
    background-image: url("path-to-different-file");
}

此 div 将更改其背景图片。

Answer 2

如果可以放置 div 而不是 img 标签，则可以在 css 中添加 background-img属性，然后悬停。像这样：

.img-small-1{
  background-img: url('..img/holder-01-small.png');
  width: 'your image's width';
  height: 'your image's height';
}

.img-small-1:hover {
  background-img: url('..img/myOtherImage.png');
}

Answer 3

可能是用这个HTML，是的。（只要在src后面插入漏掉的引号就可以了！）

a.photo:hover img {
  display: none
}
a.photo:hover::after {
  content: url(http://lorempixel.com/100/100);
}

<div class="mix category-1">

  <a href="img/holder-01-large.png" class="photo">

    <img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />

  </a>

  <a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Primer montaze</a>

  <a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>

</div>

请注意，我将 HTML 更改为指向网络上的另一张图片，以便在代码段中显示一些内容；希望您不要认为这是作弊！

使用悬停将一张图片替换为另一张图片

Replace one image with another using hover

html

css

hover

pseudo-class