JQuery plug-in realizes mouse hiding

Time:2021-10-27

This example shares the specific code of jQuery plug-in to realize mouse hiding for your reference. The specific contents are as follows

When the mouse hovers over a DOM, it will automatically hide it for you. The effect picture can’t work because of the problem of the screen recording software

The effect is as follows

Code part

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  < title > hide for a long time < / 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 style="background-color: #1abc9c;"></div>
  <div style="background-color: #3498db;"></div>
  <div style="background-color: #f1c40f;"></div>
  <div style="background-color: #e74c3c;"></div>
  <div style="background-color: #9b59b6;"></div>
 </body>
</html>
<script>
 $(function(){
  $.mh(["#box1","#box3","#box5"]);
  
  
  
 })
 $.extend({
  mh:function(op,time){
   op=op==undefined? []:op;// object
   time = time==undefined? 500:time;// How long to hide
   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 ('hidden ');
    },time)
   }
  }
 })
</script>

Train of thought explanation

  • Taking all actions into account, as long as the mouse conforms to our judgment, give a style cursor: none
  • In addition, restore the default style to cursor: default

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]