大型網站比如慕課網，電商商城的導航都是左側導航分類，右側是輪播圖，然後當滑鼠經過導航分類時顯示對應的內容框；這個就用到我之前寫的如何點選頂部導航顯示對應的左側邊欄，原理是相同的；

先來看一下我要實現的效果圖：

 跟以前寫的點選主導航顯示對應的左側欄，但因為這裡nav_index列印的時候從1開始的，程式碼前面還有個標題，所以給eq傳的時候減了1，在寫專案的時候可以通過控制檯來列印一下

 //滑鼠滑至導航顯示對應的導航內容
    $('.left_nav .nav_menu').hover(function() {
        var nav_index = $(this).index();
        $('.right_content').find('.menu_content').eq(nav_index-1).css('display','block').siblings('.menu_content').css('display','none');
    })

    $('.menu_content').mouseleave(function() {
        $(this).css('display','none');
    })
 

剛開始使用mouseout但當滑鼠滑至左側導航出現內容框時滑鼠划過去內容框已經隱藏了，所以我換了mouseleave。雖然都是滑鼠離開事件但是兩者稍微有點區別