<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// 鼠标进入事件
// $('button').mouseenter(function(){
// // $('#box').fadeOut(3000);
// $('#box').hide(3000);
// $('p').animate({fontSize:'10px'},"slow")
// });
// 鼠标离开事件
// $('button').mouseleave(function(){
// // $('#box').fadeOut(3000);
// $('#box').hide(3000);
// $('p').animate({fontSize:'10px'},"slow")
// });
// 鼠标按下事件
// $('button').mousedown(function(){
// // $('#box').fadeOut(3000);
// $('#box').hide(3000);
// $('p').animate({fontSize:'10px'},"fast")
// });
// 鼠标点击后松开事件
$('button').mouseup(function(){
// $('#box').fadeOut(3000);
$('#box').hide(3000);
$('p').animate({fontSize:'10px'},"fast")
});
//鼠标悬停事件
$('button').hover(function(){
// $('#box').fadeOut(3000);
$('#box').hide(3000);
$('p').animate({fontSize:'10px'},"fast")
});
});
</script>
<style>
#box{
width: 430px;
height: 200px;
background: #00BFFF;
}
p{
font-size: 20px;
font-weight: bold;
color: red;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<button>鼠标指向我看看</button>
<div id="box">
<p>当你把鼠标指向按钮时,便是咱们再见时~~~</p>
</div>
</body>
</html>