收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的on和off事件</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>
<style>
div {
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div></div>
<button>点击移除事件</button>
<script>
$('div').on('mouseenter',function () { //添加鼠标移入事件
$(this).hide("fast") //隐藏当前元素 div
}).on('mouseleave',function () { //添加鼠标移出事件
$(this).css({ //添加多种CSS样式
'border-radius':'20px', //圆角
'background':'yellow',
'float':'right' //右浮动
}).show("fast")
}) //当mosuseenter+mouseleave和hide+show遇到的时候，由于鼠标不可能绝对静止，所以鼠标在div元素上就产生一个动画效果
$('button').click(function () { //创建button的点击事件
$('div').off() //关闭div的所有效果
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
