jquery插件实现鼠标隐藏
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery插件实现鼠标隐藏的具体代码，供大家参考，具体内容如下
鼠标悬浮在某个dom上的时候，自动给你隐藏，效果图因为录屏软件的问题，作用不出来
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做久置隐藏</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid lightgray;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="box" id="box1" style="background-color: #1abc9c;"></div>
<div class="box" id="box2" style="background-color: #3498db;"></div>
<div class="box" id="box3" style="background-color: #f1c40f;"></div>
<div class="box" id="box4" style="background-color: #e74c3c;"></div>
<div class="box" id="box5" style="background-color: #9b59b6;"></div>
</body>
</html>
<script>
$(function(){
$.mh(["#box1","#box3","#box5"]);
})
$.extend({
mh:function(op,time){
op=op==undefined?[]:op;//对象
time = time==undefined?500:time;//多久隐藏
var str = op.join(',');
var t = null;
var f = false;
$(str).mouseenter(function(){
f = true;
$(str).css('cursor','default');
}).mouseleave(function(){
f = false;
clearTimeout(t);
$(str).css('cursor','default');
}).mousemove(function(){
if(f){
$(str).css('cursor','default');
clearTimeout(t);
hid();
}else{
clearTimeout(t);
}
})
function hid(){
t =setTimeout(function(){
$(str).css('cursor','none');
console.log('隐藏了');
},time)
}
}
})
</script>
思路解释
- 把所有动作考虑进去，只要鼠标符合我们的判断，给一个样式cursor:none就完事
- 此外就是给上cursor:default还原默认样式了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。