jquery插件實現(xiàn)鼠標(biāo)隱藏

更新時間：2021年05月14日 08:22:53 作者：阿飛超努力

這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)鼠標(biāo)隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery插件實現(xiàn)鼠標(biāo)隱藏的具體代碼，供大家參考，具體內(nèi)容如下

鼠標(biāo)懸浮在某個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>

思路解釋

把所有動作考慮進去，只要鼠標(biāo)符合我們的判斷，給一個樣式cursor:none就完事
此外就是給上cursor:default還原默認樣式了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery消息提示框插件Tipso
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動畫持續(xù)時間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。
2015-05-05
jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-05-05
詳解jQuery簡單的表格應(yīng)用
本文主要對表格的簡單應(yīng)用：表格變色;表格展開關(guān)閉;表格內(nèi)容篩選進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
jQuery prev ~ siblings選擇器使用介紹
正如標(biāo)題所言其所用為匹配 prev 元素之后的所有 siblings 元素，下面為大家分享個示例，不了解的朋友可以學(xué)習(xí)下
2013-08-08
jQuery 學(xué)習(xí)入門篇附實例代碼
這篇文章比較不錯，更重要的是一些實例代碼，對于想學(xué)習(xí)jquery的朋友是個不錯的資料。
2010-03-03
jquery實現(xiàn)數(shù)字輸入框
本文主要分享了jquery實現(xiàn)數(shù)字輸入框的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
基于jquery的bankInput銀行卡賬號格式化
jquery bankInput插件是銀行卡進行格式化顯示，能控制文本框輸入最小最大個數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時插件能實現(xiàn)自動加載格式化顯示和支持非輸入框的格式話顯示
2012-08-08
jquery統(tǒng)計輸入文字的個數(shù)并對其進行判斷
判斷輸入文字個數(shù)并提示還可以輸入多少個字，類似的功能使用jquery便可輕松實現(xiàn)
2014-01-01
jQuery屬性選擇器用法示例
這篇文章主要介紹了jQuery屬性選擇器用法,結(jié)合實例形式分析了jQuery中針對屬性的判斷與匹配相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09