如何在 CSS 中正确实现 #ID:hover{} 且不会与其他 HTML 元素错位？

Question

所以，我第一次尝试使用

<div>

元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，它有多个

<a>

链接，因为

<img>

的目标是拥有一个用作动画的

#Image:hover

函数。

实施也很顺利，但现在我遇到了我的问题，我没有发现任何具体的问题......每当我将鼠标悬停时，img 元素就会与其他 img 错位。现在我想知道我可以实施什么，这样它就不会错位......

我有这个 CSS 部分：

#Icons {
    margin: 8px 0 0;
    padding: 0;
    display: block;
    background-color: transparent;
    min-height: 43px;
    height: 43px;
    max-height: 43px;
}

#Image {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
}

#Image:hover {
    margin: 0;
    padding: 0;
    width: 43px;
    height: 43px;
}

#Media {
    margin: 0 4px;
    display: inline-block;
    min-width: 43px;
    width: 43px;
    max-width: 43px;
    min-height: 43px;
    height: 43px;
    max-height: 43px;
}

还有这个 HTML 部分：

<p id="HeaderTwo">Reachable under</p>
<div id="Icons">
    <a id="Media" href="#"><img id="Image" src="../img/discord.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/gmail.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/telegram.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/youtube.png" /></a>
</div>

我尝试将以下内容包含到一些 CSS 元素中，希望它能充当盒子限制器或其他东西。类似，这样就不会/不应该发生错位。

min-width: 43px;
width: 43px;
max-width: 43px;
min-height: 43px;
height: 43px;
max-height: 43px;

Answer 1

要避免元素调整布局大小，请使用

transform scale

。

现在，除了您的具体问题外，请考虑以下修复：

• 避免使用 ID 进行样式设置（而且 ID 必须是唯一的）
• 悬停动画是告诉用户图像是可点击的，所以触发器应该在

  <a>

  标签上

.image {
  width: 40px;
  height: 40px;
  transition: transform .3s;
  will-change: transform;
}

.media {
  display: inline-block;
  margin: 0 4px;
}

.media:hover .image {
  transform: scale(1.075);
}

<div class="icons">
    <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?1" /></a>
    <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?2" /></a>
    <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?3" /></a>
    <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?4" /></a>
</div>