<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 300px;
height: 300px;
background: rgb(196, 76, 76);
border: 1px solid #000000;
/* display: none; */}
</style>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<!--onmouseover是鼠标移上时触发函数 -->
<!-- onmouseout是鼠标移走时触发函数 -->
<button id="btn" onmouseover="down()" onmouseout="on()" >显示/隐藏盒子</button>
<div id="box">我是盒子</div>
<script>
//JavaScript写法
//display属性可以改变盒子的属性当display为none时隐藏，为block时出现
let oBtn=document.getElementById("btn");
let oBox=document.getElementById("box")
function down (){
oBox.style.display="block";
}
function on(){
oBox.style.display="none";
}
</script>
<script>
// jquery 第一种写法
// 当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
// 当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
// 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$(function () {
$("#btn").mouseenter(function () {
$("#box").show(1000);
//show(speed,linear,callback); 示例：$("div").hide(1000,"linear",function(){alert("Hide() 方法已完成!")});
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
// 第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
//linear:每一步的距离和前一步都是相同的，也就是等速
//swing:速度会加快然后最后一点距离再减速
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
});
$("#btn").mouseleave(function () {
$("#box").hide(1000);
})
})
// jquery 第二种写法
//hover()方法用于模拟光标悬停事件。
// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
// 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$(function () {
$("#btn").hover(
function () {
$("#box").show(1000,"swing");
},
function () {
$("#box").hide(1000,"swing");
}
)
})
// 第三种写法
// 您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
//$(selector).toggle(speed,callback);
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(function () {
$("#btn").hover(function () {
$("#box").toggle();
})
})
</script>
</body>
</html>
