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才会起作用）

TRUNCATE guacamole_connection CASCADE

在css中尝试类似下面的内容，你需要指定一个高度和一个宽度，因为div在技术上是空的，否则它会自行崩溃。

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

然后这个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之后插入缺少的引号，那就是！）

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，我将HTML更改为指向网络上的其他图片，以便在代码段中显示内容;希望你不要认为这是作弊行为！

使用悬停将一个图像替换为另一个图像

3 个答案: