jQuery鼠标事件及小实践

最新推荐文章于 2022-02-17 17:12:53 发布

opo77_

最新推荐文章于 2022-02-17 17:12:53 发布

阅读量123

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/opo77_/article/details/108802928

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

jQuery之鼠标事件

1. .on()方法

使用选择器创建jQuery的选取结果
使用.on()方法来指定要响应哪个事件

click

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>   
 <ul>        
 	<li>嗨</li>      
  	<li>嘿</li>       
    	<li>哈</li>   
 </ul> 
 <script>   
  $(function(){$("li").on('click',function(){            $(this).hide(); }); });   
  </script>   
   </body>
  </html>

效果就是
在这里插入图片描述
鼠标点击会消失。

onmouseover鼠标悬停事件
将上方代码中的click改成onmouseover，可以发现当鼠标划过文字的时候，文字全都消失了


<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>wuxixi便利店</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        body{            background: url(https://static1.bcjiaoyu.com/c2452c0fd9a6e8dfbe15f78a619afc20_x.jpg-4000x3000);            background-size: cover;        }        .name{            font-size:35px;            font-style: bold;            text-align: center;        }        a{            text-decoration: none;            color: rgb(100, 86, 86);        }        .category{            color: black;        }        .level2{            display: none;        }        div#wrapper {            overflow:auto;        }        div#sidebar {        color:#666666;        font-size:20px;        }        div#sidebar {        float:left;        width:400px;        background-color:#E8E8E8;        }        div#sidebar p {        padding:10px;        margin:0;        }    </style></head><body>    <div id="wrapper">         <div id="sidebar">            <div class="name">wuxixi便利店</div>            <ul class="menu">                <li class="level1">                    <a href="#" class="category">美食</a>                    <ul class="level2">                        <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>                        <li><a href="#">雪蛤</a></li>                        <li><a href="#">蜂蜜</a></li>                        <li><a href="#">红酒</a></li>                    </ul>                </li>                <li class="level1">                    <a href="#" class="category">生鲜</a>                    <ul class="level2">                        <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>                        <li><a href="#">桃子</a></li>                        <li><a href="#">山竹</a></li>                        <li><a href="#">榴莲</a></li>                    </ul>                </li>                <li class="level1">                    <a href="#" class="category">零食</a>                    <ul class="level2">                        <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>                        <li><a href="#">薯片</a></li>                        <li><a href="#">豆干</a></li>                        <li><a href="#">开心果</a></li>                    </ul>                </li>              </ul>        </div>    </div>    <script>        $(".category").on('mouseover',function(){            $(this).next().show()            .parent().siblings().children("a")            .next().hide();        });    </script></body></html>

在这里插入图片描述

opo77_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery鼠标事件及小实践

jQuery之鼠标事件1. .on()方法使用选择器创建jQuery的选取结果使用.on()方法来指定要响应哪个事件click<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫