css 如何使一个图像(这也是一个链接)更大时,悬停?

daupos2t  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(136)

我一直在试图使我的图像更大时悬停,但无济于事。我认为这可能与拥有一个画廊和让我的图像作为链接的交叉点有关(因为我已经设置了它,所以每个图像在被点击时都会在新的标签中打开),但我找不到解决悬停问题的方法。

.gallery img:hover {
  border: solid 3px black;
  margin: -3px;
  transform: scale(2.5);
}

div.gallery {
  margin: 5px;
  float: left;
  width: 100px;
  transition: .2s;
}

div.gallery img {
  width: 100px;
  height: auto;
}
<div class="gallery">
  <a href="img.png" target="_blank"><img src="https://via.placeholder.com/100.jpg" width="100" height="auto"></a>
</div>

没有悬停效果工作,我不知道为什么。我做错了什么,我该怎么办?谢谢!

xqk2d5yq

xqk2d5yq1#

我发现你的代码为我工作。我不知道为什么它对你不起作用。
我对你的代码做了点改动。

.gallery-image {
  width: 100px;
  height: auto;
  transition: transform 0.2s, border-color 0.2s;
}

.gallery-image:hover {
  border: solid 3px black;
  transform: scale(1.5);
}
<div class="gallery">
  <a href="img.png" target="_blank">
    <img src="img.png" alt="Image" class="gallery-image">
  </a>
</div>

相关问题