您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关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" ></div>
<div class="box" id="box2" ></div>
<div class="box" id="box3" ></div>
<div class="box" id="box4" ></div>
<div class="box" id="box5" ></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还原默认样式了
jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
关于“jquery插件怎么实现鼠标隐藏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。