教程集 > 脚本编程 > javascript > 正文 js 当鼠标移动到二级菜单时当前一级菜单高亮

js 当鼠标移动到二级菜单时当前一级菜单高亮

发布时间：2016-10-11 编辑：jiaochengji.com

教程集为您提供js 当鼠标移动到二级菜单时当前一级菜单高亮等资源，欢迎您收藏本站，我们将为您提供最新的js 当鼠标移动到二级菜单时当前一级菜单高亮资源

本文章给各位朋友推荐一款js 当鼠标移动到二级菜单时当前一级菜单高亮效果代码，有需要了解的朋友可参考，这是一款由jquery实现的效果，要预览时可能有问题，但是在本地不会有问题。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>/title> <style type="text/css"> *{margin:0;padding:0} body{font-size:14px;} ul{margin:0; padding:0; list-style:none;} a{text-decoration:none; color:#000;} #wrap{position:relative; top:0px;width:876px; height:34px; line-height:34px; margin:0 auto;} ul#menu li{float:left; display:block; width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;} ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;} ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;} /*子菜单*/ ul#menu li ul{position:absolute; top:37px;width:90px; display:none;border:1px #CE070E solid;border-top:none;background:#FFF;} ul#menu li ul li{float:left;} ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;} ul#menu li ul li a:hover{color:#CE070E; text-decoration:underline} ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;} </style> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("ul#menu>li:has(ul)").hover( function(){ $(this).children('a').addClass('red').end().find('ul').fadeIn(400); }, function(){ $(this).children('a').removeClass('red').end().find('ul').fadeOut(400); } ); }); </script> </head> <body>

<ul id="menu"> <li>阿里西西</li> <li>最新动态页 <ul> <li>聚焦凯撒</li> <li>聚焦凯撒</li> <li>聚焦凯撒</li> </ul> </li> <li>产品预定</li> <li>帮助查询 <ul> <li>网页特效 | </li> <li>聚焦凯撒 | </li> <li>聚焦凯撒 | </li> <li>聚焦凯撒 | </li> <li>聚焦凯撒 | </li> <li>聚焦凯撒</li> </ul> </li> <li>会员俱乐部</li> <li>网页教程</li> </ul>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
兼容多浏览器高亮带缓冲的二级折叠菜单效果
 学习从实践开始之jQuery插件开发菜单插件开发
 Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
js 当鼠标移动到二级菜单时当前一级菜单高亮
 7款风格新颖的jQuery/CSS3菜单导航分享
 jquery下拉菜单 ul标签下拉菜单的例子
 jQuery ul标签下拉菜单演示代码
 jquery中使用slideDown和slideUp做二级菜单思路解决
 用jquery实现下拉菜单效果的代码
 Jquery 下拉菜单的实现代码一例

上一篇：Javascript 显示/隐藏折叠菜单效果下一篇：基于jquery平滑二级下拉菜单效果

[关闭]

js 当鼠标移动到二级菜单时当前一级菜单高亮

最近更新

浏览排行