html5鼠标 隐藏,jquery插件实现鼠标隐藏

本文实例为大家分享了jquery插件实现鼠标隐藏的具体代码，供大家参考，具体内容如下

鼠标悬浮在某个dom上的时候，自动给你隐藏，效果图因为录屏软件的问题，作用不出来

效果如下

代码部分

做久置隐藏

*{

margin: 0;

padding: 0;

}

.box{

border: 1px solid lightgray;

width: 100px;

height: 100px;

margin: 10px;

float: left;

}

$(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)

}

}

})

思路解释

把所有动作考虑进去，只要鼠标符合我们的判断，给一个样式cursor:none就完事

此外就是给上cursor:default还原默认样式了

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