導航欄是網(wǎng)站的重要組成部分。為了讓用戶更好地了解自己的位置和導航欄所提供的信息，一種經(jīng)常使用的方式是鼠標經(jīng)過的功能。在這篇文章中，我將介紹如何使用CSS來實現(xiàn)導航鼠標經(jīng)過的效果。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>

首先，我們需要給導航欄添加樣式。以下是為導航欄添加樣式的CSS代碼：

nav {
background-color: #f2f2f2;
display: flex;
justify-content: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #333;
color: #fff;
}

這段代碼設置了導航欄背景顏色、居中和樣式化列表。其中，前三個CSS屬性設置導航欄樣式，后兩個CSS屬性設置列表項和鏈接樣式。接下來，我們添加鼠標經(jīng)過的樣式。

nav ul li a:hover {
background-color: #333;
color: #fff;
}

這段代碼設置當鼠標經(jīng)過鏈接時，鏈接的背景顏色改變成黑色，文本顏色改變成白色。

現(xiàn)在導航鼠標經(jīng)過的效果已經(jīng)實現(xiàn)了。我們可以用此方法表現(xiàn)出清晰的導航欄，帶來更好的用戶體驗。