jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

本文举例说明了jQuery的黑色导航菜单代码，实现鼠标悬停背景的翻转。分享给大家参考。具体如下：

这是jQuery实现的鼠标悬停和背景翻转的黑色导航菜单。预览效果时，左下角会提示错误，看不到效果。刷新一下就能看到效果；当然，在实际使用中，不会有这样的问题。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-鼠标悬停-bg-cha-black-nav-menu/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题导航菜单-鼠标悬停背景翻转的黑色jQuery菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .菜单{高：41px显示：块；宽度宽度：662px}。菜单ul {列表式：无；划水：0;margin:0}。菜单ul li { float:left飞越：隐藏；位置：相对；文本对齐：居中；高度：38 px线高：31 px*线高：33 px背景： URL(' images/tme nubg。png ')重复-x；}.菜单保险商实验所阿利{位置：相对；显示：块；宽度：81 pxheight :31 pxfont-family : '微软雅黑；font-size :12 px字母间距：1 px文本转换：大写；文本装饰：无；光标：指针指针；}.菜单保险商实验所阿利span { position : absolute eleft :0宽度：81 px}.菜单保险商实验所阿利跨度。out { top :0 px}.阿利菜单完毕。菜单保险商实验所阿利跨度。BG { top :-45px；} # menu { position : absolute margin :4 px 0px 0px 295 px * margin :4 px 0px 0px-185 px；} #菜单保险商实验所阿利{ color: # fff文本装饰：无；} #菜单保险商实验所阿利跨越{ color: # 000文本装饰：无；} #菜单ul Li span。BG {身高：32 px背景： URL('图像/通过BG。png ')中心中心无重复；} #菜单fl { background : URL(' images/lrbg。png ')无重复；宽度：7 px高度：38 pxfloat:left} #菜单fr { background : URL(' images/lrbg。png ')no-repeat-8px 0px；宽度：7 px高度：38 px右浮动：}/style脚本src=' http : jquery 1。3 .2 .js ' type=' text/JavaScript '/script脚本语言=' JavaScript ' $(文档)。ready(function() { $('#menu阿利'))。内包(外包).追加(' span class=' BG '/span ')；$(' #菜单阿利')。每个（函数(){ $('span class='over'' $(this)).文本()'/span ').appendTo(这个);});$(' #菜单阿利')。悬停(函数(){ $(').灭，这个)。停止()。动画({'top': '45px'}，250)；//下移-隐藏$('。结束了，这个)。停止()。动画({'top': '0px'}，250)；//下移-显示$('。'' BG '，这个)。停止()。动画({'top': '0px'}，120)；//下移-显示},函数(){ $('。'灭，这个)。停止()。动画({'top': '0px'}，250)；//上移-显示$('。结束了，这个)。停止()。动画({'top': '-45px'}，250)；//上移-隐藏$('。' BG '，这个)。停止()。动画({'top': '-45px'}，120)；//上移-隐藏});$('#menu2阿利')。内包(' span class=' out '/span ')；$('#menu2阿利')。每个（函数(){ $('span class='over'' $(this)).文本()'/span ').appendTo(这个);});$('#menu2阿利')。悬停(函数(){ $(').灭，这个)。停止()。动画({'top': '45px'}，200)；//下移-隐藏$('。结束了，这个)。停止()。动画({'top': '0px'}，200)；//下移-显示},函数(){ $('。'灭，这个)。停止()。动画({'top': '0px'}，200)；//上移-显示$('。结束了，这个)。停止()。动画({'top': '-45px'}，200)；//上移-隐藏});});/script/head dydiv class=' clear '/div div id=' content ' div id=' top ' div id=' menu ' class=' menu ' div class=' fl '/div class=' fr '/div ul lia href=' # '我们/a/li lia href='# '产品介绍/a/li lia href='# '软件下载/a/li lia href='# '商业授权/a/li lia href='# '模板市场/a/li lia href='# '脚本下载/a/li lia href='# '交流论坛/a/li lia href='# '脚本交流/a/Li/ul/div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。