jQuery hover 事件制作jquery菜单

发布时间:2020-08-13 16:33:04 作者:serverking6
来源:网络 阅读:865

jQuery hover事件

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。



  当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。


参数 :

over (Function) : 鼠标移到元素上要触发的函数

out (Function): 鼠标移出元素要触发的函数


示例 :

鼠标悬停的表格加上特定的类


jQuery 代码:


$("td").hover(

function () {

  $(this).addClass("hover");

 },

function () {

  $(this).removeClass("hover");

 }

);

实例如下:

<html>

      <head>

             <style>

                    body{

                           font-size:12px;

                           margin:0px;

                    }

                    #box{

                           width:150px;

                           margin:auto;

                    }

                    .menu{

                           width:150px;

                           line-height:25px;

                           background:#fcc;

                    }

                    .level1{

                           border-color:#fba;

                           border-style:solid;

                           border-width:0px1px 1px;

                    }

                    ul,li {list-style-type:none;margin:0;padding:0;}

                    .menuli ul{overflow:hidden; display:none;}

                    .menuli.level1 a{

                         display: block;

                      height: 28px;

                          line-height: 28px;                  

                           color:#42556B;

                           text-decoration:none;

                    }

                    .level2{

                           background-color:white;


                    }

                    .level2li a  {

                           display:block;

                          height: 28px;

                          line-height: 28px;

                           color:#888;

                           background-color:white;


                    }

                    .level2li a:hover  {

                           color:#f00;


                    }

                    .current{

                           overflow:hidden;

                           background-color:#fba;


                    }


             </style>

             <title>jquery导航</title>

             <scriptsrc="jquery.js"></script>

             <script>

function dropMenu(obj){

      $(obj).each(function(){     //遍历当前元素下的每个元素

             vartheSpan = $(this);

             vartheMenu = theSpan.find(".level2");  //查找类名为".level2"的每个元素

             vartarHeight = theMenu.height();

             theMenu.css({height:0,opacity:0});

             theSpan.hover(

                    function(){

                           $(this).addClass("current");

                           theMenu.stop().show().animate({height:tarHeight,opacity:1},500);

                    },

                    function(){

                           $(this).removeClass("current");

                           theMenu.stop().animate({height:0,opacity:0},500,function(){

                                  $(this).css({display:"none"});

                           });

                    }

             );

      });

}


$(document).ready(function(){


      dropMenu(".level1");


});


             </script>

      </head>

      <body>

             <divid="box">

                    <ulclass="menu">

                           <liclass="level1"><a href="#">主页</a>

                                  <ulclass="level2">

                                         <li><ahref="#">主页一</a></li>

                                         <li><ahref="#">主页二</a></li>

                                         <li><ahref="#">主页三</a></li>

                                  </ul>

                           </li>

                           <liclass="level1"><a href="#">新闻</a>

                                  <ulclass="level2">

                                         <li><ahref="#">新闻一</a></li>

                                         <li><ahref="#">新闻二</a></li>

                                         <li><ahref="#">新闻三</a></li>

                                  </ul>

                           </li>

                           <liclass="level1"><a href="#">联系方式</a>

                                  <ulclass="level2">

                                         <li><ahref="#">联系方式一</a></li>

                                         <li><ahref="#">联系方式二</a></li>

                                         <li><ahref="#">联系方式三</a></li>

                                  </ul>

                           </li>

                    </ul>

             </div>


      </body>

</html>

效果图如下:

jQuery hover 事件制作jquery菜单

推荐阅读:
  1. python前端jQuery进阶
  2. jQuery制作菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

制作 检测 jquery

上一篇:django连接数据库mysql的方法

下一篇:django的学习方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》