CSS導航欄是網頁設計中最基本的元素之一，通常包括一系列鏈接或按鈕，提供了用戶瀏覽網站的主要方式。在如今的網頁設計中，一個好看、易用的導航欄是至關重要的。

在CSS中，可以使用鼠標事件來為導航欄添加交互效果，吸引用戶的注意力。常用的鼠標事件包括hover（鼠標移動至元素上方）、click（鼠標點擊元素）等等。

/* 通過hover為導航欄添加背景色變換 */
.nav {
background-color: #ffffff;
}
.nav a:hover {
background-color: #cccccc;
}
/* 通過click為導航欄添加展開/收起效果 */
.nav .menu {
display: none;
}
.nav .menu.active {
display: block;
}
.nav .toggle {
cursor: pointer;
}
.nav .toggle.active {
transform: rotate(-180deg);
}
.nav .toggle:before {
content: "\25bc";
}
.nav .toggle.active:before {
content: "\25b2";
}
.nav .toggle:hover {
color: #999999;
}

以上代碼中，第一個例子通過為a元素添加:hover偽類，當用戶將鼠標移動到鏈接上方時，背景色會從白色變為淺灰色，為頁面添加了簡單的交互效果。

第二個例子則用到了click事件和CSS3動畫效果。當用戶點擊“Toggle”按鈕時，class為“menu”的元素會顯示出來（原本是display:none），同時按鈕上的小箭頭會旋轉，表示當前菜單是展開狀態。點擊按鈕再次，菜單會收起，按鈕上的小箭頭也會變回原來的形態。

通過使用hover、click等事件，以上例子為導航欄添加了一些簡單的交互效果，使它們看起來更加動態和現代化。當然，這只是CSS導航欄鼠標事件的基礎，還有很多其他的效果可以實現，具體要看設計師的想象力和創意了。