CSS鼠標經過導航圖片是一種常見的CSS技術，可以在網頁中模擬鼠標移動到導航欄時的效果。這種技術可以用來增強網頁的導航功能，同時也可以使頁面更加流暢和易于導航。

使用CSS鼠標經過導航圖片的方法非常簡單。首先，我們需要在HTML文件中添加一個導航欄，并使用CSS樣式來定義它。例如：

```html

<nav>

<ul>

<li><a href="#">首頁</a></li>

<li><a href="#">關于我</a></li>

<li><a href="#">服務與支持</a></li>

<li><a href="#">聯系我們</a></li>

</ul>

</nav>

在CSS中，我們可以使用`@media`規則來設置鼠標經過導航圖片的效果。例如，我們可以使用以下CSS代碼來模擬當鼠標移動到導航欄時的效果：

```css

nav {

position: relative;

nav ul {

position: absolute;

top: 0;

left: 0;

width: 100%;

padding: 0;

nav ul li {

display: inline-block;

width: 20%;

margin: 0 5px;

nav ul li a {

display: block;

padding: 0 10px;

color: #fff;

text-decoration: none;

background-color: #007bff;

transition: background-color 0.3s ease;

nav ul li a:hover {

background-color: #0069d9;

在這個例子中，我們使用了`position: absolute`來定義導航欄的列表項，并使用`top: 0; left: 0;`來使其保持與頁面垂直和水平排列。然后，我們使用`display: inline-block`來使列表項變成塊級元素，并使用`width: 20%;`和`margin: 0 5px`來定義每個列表項的寬度和間距。

使用CSS鼠標經過導航圖片技術可以增強網頁的導航功能，并使頁面更加流暢和易于導航。