我希望链接停止有额外的移动，而悬停。
当我在链接中添加“position:absolute”时，就会停止不想要的移动。
但是通过这样做，链接将跳出正常的'display:flex'流。
因此，我宁愿不添加'position:absolute'。
使用“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 {
width: 100px;
height: 20px;
background-color: #FF9985;
border-radius: 5px;
color: white;
border: 1px solid #FF9985;
}
