大型网站比如慕课网，电商商城的导航都是左侧导航分类，右侧是轮播图，然后当鼠标经过导航分类时显示对应的内容框；这个就用到我之前写的如何点击顶部导航显示对应的左侧边栏，原理是相同的；

先来看一下我要实现的效果图：

 跟以前写的点击主导航显示对应的左侧栏，但因为这里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。虽然都是鼠标离开事件但是两者稍微有点区别