如何在使用“Flex”作为显示悬停时停止不需要的链接移动？

如何解决如何在使用“Flex”作为显示悬停时停止不需要的链接移动？

我希望链接在悬停时停止额外移动。

当我向链接添加“位置：绝对”时，会停止不需要的移动。

但是这样做，链接会跳出正常的“display:flex”流程。
因此，我宁愿不添加“位置：绝对”。

在使用“display: flex;”悬停时稳定链接的最佳方法是什么？
（仅限 HTML 和 CSS 解决方案）

HTML

<!DOCTYPE html>

<html>

<head>
  <link href="portfolio1.css" type="text/css" rel="stylesheet">
</head>

<body>
<section>
  <h2 class="seperate">Topics</h2>
  <ul>
    <li ><a class="nav" href="#">HTML</a></li>
    <li ><a class="nav" href="#">CSS</a></li>
    <li ><a class="nav" href="#">Javascript</a></li>
  </ul>
</section>
</body>
</html>

CSS

* {
  margin: 10px auto;
}

body {
  color: white;
  font-family: Helvetica;
  text-align: center;
}

h2 {
  font-family: "Times New Roman";
  border: 2px solid pink;
  width:30%;
  margin: 20px auto;
  padding: 10px auto;
}

section {
  background-color: #FF745C;
  border-top: 5px dotted tomato;
  margin: 10px auto;
  height: 100%;
  width: : 100%;
  overflow: scroll;
  /*display: flex;*/
}

section ul{
  width: 100%;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  padding-left:0;

}

section ul li {
    display: inline-flex;
    margin: 10px auto;

}

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
}

a:hover {
  border: 1px solid #FF441F;
  border-radius: 10px;
  font-weight: 600;
  transition: border,border-radius,font-weight 150ms ease-in;
}

解决方法

如果您在悬停时添加默认不存在的边框，这可能会更改元素的尺寸。尝试默认添加一个不可见的边框，以便仅更改颜色：

a {
  border: 1px solid transparent;
}

a:hover {
  border-color: #FF441F;
}

我通过编辑a标签的样式解决了您的问题。

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
  border: 1px solid #FF9985;
}