如何通过悬停更改图像？答案

【问题标题】：how can i make an image change with hover?如何通过悬停更改图像？
【发布时间】：2021-06-03 08:44:33
【问题描述】：

我尝试在悬停时将图像更改为另一个，但是第二个出现了，而第一个没有消失这是代码，我做错了什么吗？希望你发现问题很清楚

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

<div class="card">
  <img src="redlo.jpg" width="100" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

【问题讨论】：

1.我建议使用背景图片，如果想用 css 改变它。 2. 使用图像，您可以使用 javascript 使用 img 标签来实现相同的目的。 3. 添加两个不同的类，即 img-top-1, img-top-2, .card .img-top-1 { display : none;} .card img-top-2 { display:inline}

标签： html css image hover

【解决方案1】：

我不太确定我是否正确理解了您的问题。在.card:hover 上，第二张图片显示在第一张图片上方并覆盖了第一张图片，因此不再可见。

因此您的代码运行良好，无需额外让第一个图像“消失”。

但是，如果您（但是）想要/需要这样做，可以添加到您的 css 中：

.card:hover img:first-child {
    display: none;
}

很好的附加通知：你的 css 翻了一番。您只需要编写一次 .card .card .img-top 和 .card:hover .img-top 类 ;-)

更新：您的图像工作代码

您可以在此处查看您的代码如何正确运行。刚刚删除了 double css。

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

<div class="card">
  <img src="https://dummyimage.com/100x100/0000ff/ffffff&text=Image+one" width="100" height="100" alt="first">
  <img src="https://dummyimage.com/100x100/ff0000/ffffff&text=Image+two" class="img-top" width="100" height="100" alt="second">
</div>

【讨论】：

非常感谢，我刚试过，效果很好

【解决方案2】：

你的图片的高度好像是0

你可以试试：

.card:hover .img-top {
  display: block;
}

如果不起作用，请将其添加到 .img-top 选择器

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

【讨论】：

没有。在这两种情况下，两个图像的大小都是正确的，在 html 中使用100x100px 给出。代码工作正常。在实际示例中，没有使用任何图像，因此您只能看到 alt 属性……但没有第二张图像覆盖第一个图像……因此您仍然可以从:hover 上的第一张图像中看到 alt 属性。

【解决方案3】：

这应该会有所帮助

.card {
  width: 130px;
  height: 195px;
  position: relative;
  margin: 50px;
}

.img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: block;
}
.card:hover .img-top1 { display: none }

<div class="card">
  <img src="redlo.jpg" width="100" class="img-top1" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

【讨论】：

请完整解释你的答案
当您将鼠标悬停在卡片元素上时，您并没有隐藏您的第一张图片，我只是添加了 display none 。其余的更改只是清理