jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
更新時(shí)間：2021年05月14日 08:22:53 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏的具體代碼，供大家參考，具體內(nèi)容如下
鼠標(biāo)懸浮在某個(gè)dom上的時(shí)候，自動(dòng)給你隱藏，效果圖因?yàn)殇浧淋浖膯?wèn)題，作用不出來(lái)
效果如下
代碼部分
<!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;//對(duì)象
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>
思路解釋
- 把所有動(dòng)作考慮進(jìn)去，只要鼠標(biāo)符合我們的判斷，給一個(gè)樣式cursor:none就完事
- 此外就是給上cursor:default還原默認(rèn)樣式了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接控制圖片的滑動(dòng)展開與隱藏效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
- jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
- 基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
- 基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
相關(guān)文章
jQuery實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實(shí)現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動(dòng)畫持續(xù)時(shí)間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。2015-05-05
jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
本文主要對(duì)表格的簡(jiǎn)單應(yīng)用：表格變色;表格展開關(guān)閉;表格內(nèi)容篩選進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
正如標(biāo)題所言其所用為匹配 prev 元素之后的所有 siblings 元素，下面為大家分享個(gè)示例，不了解的朋友可以學(xué)習(xí)下2013-08-08
jQuery 學(xué)習(xí)入門篇附實(shí)例代碼
這篇文章比較不錯(cuò)，更重要的是一些實(shí)例代碼，對(duì)于想學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的資料。2010-03-03
本文主要分享了jquery實(shí)現(xiàn)數(shù)字輸入框的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
jquery統(tǒng)計(jì)輸入文字的個(gè)數(shù)并對(duì)其進(jìn)行判斷
判斷輸入文字個(gè)數(shù)并提示還可以輸入多少個(gè)字，類似的功能使用jquery便可輕松實(shí)現(xiàn)2014-01-01
這篇文章主要介紹了jQuery屬性選擇器用法,結(jié)合實(shí)例形式分析了jQuery中針對(duì)屬性的判斷與匹配相關(guān)操作技巧,需要的朋友可以參考下2016-09-09