jquery实现美观的导航菜单鼠标提示特效代码

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下：

这是一个奇妙的导航菜单鼠标提示特效，俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。

先来看看运行效果截图：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-nav-tips-nav-menu-style-codes/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '/标题链接提示特效/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).菜单a ').悬停(function() { $(this)).下一个(' em ').动画({ opacity: ' show '，top: '-75'}，' slow ')；}，function() { $(this).下一个(' em ').animate({ opa city 3360 ' hide '，top: '-85'}，' fast ')；});});/script style type=' text/CSS ' body { margin : 10px auto；宽度： 570像素；font: 75%/120% Arial，Helvetica，无衬线字体；}.菜单{ margin: 100px 0 0padd : 0列表样式：无；}.菜单李{ padd : 0；margin: 0 2px向左浮动：相对位置：文本对齐：中心；}.菜单a { padd : 14px 10pxdisplay :块；color: # 000000宽度： 144像素；文本装饰：无；字体粗细：粗体；背景： url(images/button.gif)无重复居中；}.菜单Li em {背景： URL(图像/悬停。png)不重复；宽度： 180像素；高度： 45px绝对位置：top :-85px；左侧：-15px；文本对齐：中心；padd : 20px 12px 10px font-style :正常；z-index : 2；显示器：无；}/style/head dyul class=' menu '阿利http://。百度。' com '网页设计师墙/a设计思想、网页趋势和教程的emA Wall/em /li阿利href='# '最佳网页画廊/a emfestival最佳半铸钢钢性铸铁(Cast Semi-Steel)和闪光网站/em/李阿利WDW设计工作室设计师Nick La/em /li/ul/body/html的emBlog和设计作品集希望本文所述对大家的jquery程序设计有所帮助。