#--hover的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.menu{
height:50px;
width: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;
width: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>
