hover事件在元素下面插入div_hover事件和停止动画排列案例

最新推荐文章于 2024-04-29 14:41:33 发布

Nan Chiang

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量372

点赞数

文章标签： hover事件在元素下面插入div

本文链接：https://blog.csdn.net/weixin_27442001/article/details/112092492

版权

 <body>
     <ul class="nav">
         <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>
             <ul><li><a href="">私信</a></li><li><a href="">评论</a></li> <li><a href="">@我</a></li></ul>
         </li>
     </ul> 
 <script>
         $(function() {
             // 鼠标经过
             // $(".nav>li").mouseover(function() {
             //     // $(this) jQuery 当前元素  this不要加引号
             //     // show() 显示元素  hide() 隐藏元素
             //     $(this).children("ul").slideDown(200);
             // });
             // // 鼠标离开
             // $(".nav>li").mouseout(function() {
             //     $(this).children("ul").slideUp(200);
             // });
             // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
             // $(".nav>li").hover(function() {
             //     $(this).children("ul").slideDown(200);
             // }, function() {
             //     $(this).children("ul").slideUp(200);
             // });
             // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会 触发这个函数
             $(".nav>li").hover(function() {
                 // stop 方法必须写到动画的前面 
                $(this).children("ul").stop().slideToggle();
             });
         })
     </script>
</body>

Nan Chiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hover事件在元素下面插入div_hover事件和停止动画排列案例

<body> <ul class="nav"> <li> <a href="#">微博</a> <ul><li><a href="">私信</a></li><li><a href=...
复制链接

扫一扫