CSS導(dǎo)航欄是設(shè)計(jì)一個(gè)漂亮網(wǎng)站必不可少的一部分，其中跟隨鼠標(biāo)的特效可以為網(wǎng)站增添一份動感和互動性。以下是一份實(shí)現(xiàn)跟隨鼠標(biāo)css導(dǎo)航的代碼：

<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span class="highlight"></span>
</nav>
<style>
.nav-bar {
display: flex;
justify-content: center;
align-items: center;
background-color: #174887;
padding: 10px;
position: relative;
}
.nav-bar ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 400px;
}
.nav-bar li a {
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 10px 20px;
position: relative;
}
.highlight {
position: absolute;
width: 80px;
height: 3px;
background-color: #fff;
bottom: -10px;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.nav-bar li a:hover~.highlight {
width: 100%;
transform: translateX(-10%);
}
</style>

在這個(gè)代碼中，我們通過使用CSS的偽類選擇器:hover和相鄰兄弟選擇器~來實(shí)現(xiàn)了當(dāng)鼠標(biāo)懸停在導(dǎo)航欄的某一項(xiàng)上時(shí)，下劃線會跟隨鼠標(biāo)移動的效果。 通過更改樣式，我們可以使得下劃線的動畫更加流暢或者更改下劃線的顏色與寬度等等。