当鼠标移动到二级菜单时当前一级菜单保持高亮的js特效代码

稿源：互联网 2018-09-21 00:33:27 点击： 25171 撤稿纠错

实现的效果：当鼠标移动到菜单二级当前一级保持高亮，而且菜单收缩具有缓冲渐显渐隐的特效。使用jquery实现，运行代码无效果时，请先刷新后查看特效。

以下讨论的是和鼠标移动二级菜单一级菜单高亮相关的当鼠标移动到二级菜单时当前一级菜单保持高亮的js特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>阿里西西特效演示中心,js.alixixi.com仿菜单</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>
<div id="wrap">
 <ul id="menu">
     <li><a href="http://www.alixixi.com" >阿里西西</a></li>
     <li><a href="#" >最新动态页</a>
         <ul>
             <li><a href="#">聚焦凯撒</a></li>
             <li><a href="#">聚焦凯撒</a></li>
             <li><a href="#">聚焦凯撒</a></li> 
          </ul>
        </li>
        <li><a href="#" >产品预定</a></li>
        <li><a href="#" >帮助查询</a>
         <ul>
             <li><a href="http://js.alixixi.com">网页特效</a> | </li>
                <li><a href="#">聚焦凯撒</a> | </li>
                <li><a href="#">聚焦凯撒</a> | </li>
                <li><a href="#">聚焦凯撒</a> | </li>
                <li><a href="#">聚焦凯撒</a> | </li>
                <li><a href="#">聚焦凯撒</a></li> 
            </ul>
        </li>
        <li><a href="#" >会员俱乐部</a></li>
        <li><a href="http://www.alixixi.com" >网页教程</a></li>
    </ul> 
</div>
</body>
</html>

关于当鼠标移动到二级菜单时当前一级菜单保持高亮的js特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092185405.shtml方便下次再访问哦。

·上一篇： 根据时间切换背景颜色色彩js特效代码
·下一篇： 鼠标点击窗口或浮动层以外的地方时让该窗口关闭

当鼠标移动到二级菜单时当前一级菜单保持高亮的js特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻