鼠标经过(hover)事件的延时处理

关于鼠标hover事件及延时

　　鼠标经过事件为web页面上最常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。

　　一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。

比较适用于类似场景：



像腾讯首页，此处选项卡：对鼠标经过事件进行了延时处理



　下面贴出实现代码

(function ($) {
'use strict'
$.fn.hoverdelay = function (options) {
if (typeof options == 'string') {
options = { feedback: options };
}

var settings = $.extend($.fn.hoverdelay.defaults, options || {});
var hoverTimer, outTimer;
return this.each(function () {
var $own = $(this);
$own.hover(function () {
clearTimeout(outTimer);
hoverTimer = setTimeout(function () {
settings.mouseover($own);
}, settings.hoverdelay);
},
function () {
clearTimeout(hoverTimer);
outTimer = setTimeout(function () {
settings.mouseout($own);
}, settings.hoverremove);
});
});
};

$.fn.hoverdelay.defaults = {
hoverdelay: 3000,
hoverremove: 50,
mouseover: function (selector) { },
mouseout: function (selector) { }
};

})(jQuery);

以上代码收集自：海丁网。 张鑫旭 博客详细介绍了此种情况，也给出了实现方式，二者代码没什么差别，个人只是更习惯海丁网参数的命名方式。


我可是最爱用的 Camel 啊，这不科学...