溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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" ></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是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
關于“jquery插件怎么實現鼠標隱藏”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
