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

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。仅使用 CSS 不接触此 HTML 代码是否有可能？

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

可能是在使用这个 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 更改为指向网络上的另一个图像，以便在 sn-p 中显示一些内容；希望你不要认为这是作弊！

Answer 3

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

.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');
}