我正在使用HTML和CSS创建一个网站，我做了一个导航栏来移动网站。
然而，我有一个问题与导航条上的填充。我有它的设置，所以每当你把你的光标悬停在导航栏上的一个选项，文本变得粗体和背景颜色的变化。但是，每当光标停留在文本上时，它就会变成粗体，并展开文本。有没有一种方法，我可以使填充改变，当鼠标悬停在文本上，使文本变成粗体时，它不会移动导航条上的其他项目?
我的代码(我使用标签使当前页面的选项加粗):
<DOCTYPE html>
<head>
<style>
.topnav {
overflow: hidden;
background-color: black;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #2222
color: white;
font-weight: 700;
}
</style>
</head>
<div class="topnav">
<b><a href="index.html">Home</a></b>
<a href="ComingSoonindex.html">Coming Soon</a>
<a href="VideoLibraryindex.html">Video Library</a>
<a href="CastAndCrewindex.html">Cast and Crew</a>
</div>
//rest of body code
</body>
</html>这是一个使用CSSpseudo-element和attribute的技巧
.topnav {
overflow: hidden;
background-color: black;
display:flex;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:first-child{
font-weight: 700;
}
.topnav a:hover {
background-color: #222;
font-weight: 700;
}
.topnav a:before {
display: block;
content: attr(data-title);
font-weight: 700;
overflow: hidden;
visibility: hidden;
height: 0;
}<div class="topnav">
<a data-title="Home" href="index.html">Home</a>
<a data-title="Coming Soon" href="ComingSoonindex.html">Coming Soon</a>
<a data-title="Video Library" href="VideoLibraryindex.html">Video Library</a>
<a data-title="Cast and Crew" href="CastAndCrewindex.html">Cast and Crew</a>
</div>