jquery插件怎么实现鼠标隐藏

2023-06-15 01:06:14 887人浏览薄情痞子

摘要

这篇文章将为大家详细讲解有关Jquery插件怎么实现鼠标隐藏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下鼠标悬浮在某个dom上的时候，自动给你隐藏，效果图因为录屏软件的问题，作用不出来效果如

这篇文章将为大家详细讲解有关Jquery插件怎么实现鼠标隐藏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

鼠标悬浮在某个dom上的时候，自动给你隐藏，效果图因为录屏软件的问题，作用不出来

效果如下

jquery插件怎么实现鼠标隐藏

代码部分

<!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是什么

jquery是一个简洁而快速的javascript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、ajax交互和动画，以便快速开发网站。

关于“jquery插件怎么实现鼠标隐藏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery插件怎么实现鼠标隐藏

本文链接: https://www.lsjlt.com/news/276689.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341