#--hover的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .menu{ height:50px; 100%; background-color: #0f0f0f; color:darkgray; } .menu>ul{ list-style-type:none; margin:0; padding: 0; } .menu>ul>li{ float:left; line-height: 50px; /*每个li的右边距*/ margin-right:15px; position:relative; } .id-card{ background-color: #2459a2; color:white; height:50px; 100px; position: absolute; /*右对齐*/ right:0; /*先设为隐藏*/ display:none; } /*添加hover,hover添加位于鼠标移动到所需hover的那个标签，而不是隐藏的那个子标签*/ .hover>.id-card{ display:block; } </style> </head> <body> <div class="menu"> <ul> <li>登录</li> <li>验证</li> <li class="card">购物车 <div class="id-card"> 空空如也~ </div> </li> </ul> </div> <script src="jquery-3.4.1.min.js"></script> <script> //hover绑定事件分为两步骤，一是鼠标进入事件，二是鼠标划出事件 $('.menu').on('mouseenter', '.card', function() {//绑定鼠标进入事件 $(this).addClass('hover'); }); $('.menu').on('mouseleave', '.card', function() {//绑定鼠标划出事件 $(this).removeClass('hover'); }); //其他的做法 // $(".card").hover( // function () { // // 鼠标移进来 // $(".id-cart").css("display", "block"); // // }, // function () { // // 鼠标移出去 // $(".id-cart").css("display", "none"); // } // ) // $(".card").hover( // function () { // $(this).addClass("hover"); // }, // function () { // $(this).removeClass("hover"); // } // ); </script> </body> </html> #--input输入框值动态变化（如搜索框中实时追踪输入的数据匹配相应的搜索项） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.4.1.min.js"></script> <script> // input框失去焦点就触发 // $("#i1").blur(function () { // var value = $(this).val(); // console.log(value); // }); // 只要input框的值发生变化就触发 $("#i1").on("input", function () { var value = $(this).val(); console.log(value); }) </script> </body> </html>