这是我制作的带有链接的导航栏。我希望悬停时黑色背景不会移动...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {font-size: large;}<body>
<nav>
<ul>
<li> <a href="#Home"> Home </a> </li>
<li> <a href="#Articles"> Articles </a> </li>
<li> <a href="#About us"> About us </a> </li>
</ul>
</nav>
</body>可以用transform:scale(X)，不扰流
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {transform:scale(1.15);}<body>
<nav>
<ul>
<li> <a href="#Home"> Home </a> </li>
<li> <a href="#Articles"> Articles </a> </li>
<li> <a href="#About us"> About us </a> </li>
</ul>
</nav>
</body>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
通过修改坐标空间，CSS 变换在不中断正常文档流的情况下改变受影响内容的形状和位置。本指南介绍了如何使用转换。