悬停时显示图标时如何使链接不动？答案

【问题标题】：How to make links not move when icon is showing on hover?悬停时显示图标时如何使链接不动？
【发布时间】：2023-02-05 22:02:54
【问题描述】：

差不多，我试图在链接悬停后在链接旁边添加一个爪子图标。所以我希望图标不可见，并且只在我将鼠标悬停在链接上时显示。我设法做到了，但是当我将鼠标悬停在一个链接上时，由于图标可见，其他链接会跳到一边。我怎样才能使链接已经考虑到图标的大小并且一旦它出现在悬停时就不会跳到一边？

[HTML](https://i.stack.imgur.com/a1CQq.png)
[CSS](https://i.stack.imgur.com/f17Ew.png)
[Before Hover](https://i.stack.imgur.com/MMFDV.png)
[After Hover](https://i.stack.imgur.com/HQv12.png)

由于我在 Web Dev 方面还很陌生，所以解决这个问题可能很容易。我只是尝试了一些随机的事情，说实话我什至不记得了。添加和删除代码只是为了看看它是否会有所作为。无论我做什么，我都没有真正设法做出任何改变（尝试在悬停到基本宽度后不悬停时包括链接的总宽度，并将链接文本推到一边等等等等），它是总是一样。当我悬停时，链接会跳到一边。

先感谢您。

【问题讨论】：

标签： html css hover

【解决方案1】：

这里的问题是带有 display:none 的元素不会在 DOM 中呈现，所以不会计算宽度，这就是为什么如果你通过 display:block 使它们可见，它就会移动。

您的问题有多种解决方案。我会给你两个简单的解决方案：

1.使用可见性

HTML:

<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>

CSS：

.icon.hide{
  visibility:hidden
}
a:hover .icon.hide{
  visibility:visible
}

2.使用不透明度（这里你可以添加过渡效果）

HTML:

<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>

CSS：

.icon.hide{
  opacity:0
}
a:hover .icon.hide{
  opacity: 1
}

希望这会回答你的问题。

【讨论】：