JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

jquery插件实现鼠标隐藏

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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还原默认样式了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的jquery插件实现鼠标隐藏全部内容，希望文章能够帮你解决jquery插件实现鼠标隐藏所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程