一、关于鼠标hover事件及延时
鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用css :hover伪类实现，复杂点的用js。
一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。
例如，在腾讯网首页，几乎对所有的鼠标经过事件进行了延时处理，例如其选项卡：
或是其顶部的搜搜导航条，见下图：
二、实例及演示
本文的主要内容就是展示我前几天写的鼠标延迟的方法，jquery下的方法，水平拙劣，仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例，演示jquery下的延时处理。下图为demo页面的效果截图：
三、代码与实现
说到延时，离不开window下的settimeout方法，本实例的jquery方法的核心也是settimeout。代码不长，完整如下：
复制代码 代码如下:
(function($){
$.fn.hoverdelay = function(options){
var defaults = {
hoverduring: 200,
outduring: 200,
hoverevent: function(){
$.noop();
},
outevent: function(){
$.noop();
}
};
var sets = $.extend(defaults,options || {});
var hovertimer, outtimer;
return $(this).each(function(){
$(this).hover(function(){
cleartimeout(outtimer);
hovertimer = settimeout(sets.hoverevent, sets.hoverduring);
},function(){
cleartimeout(hovertimer);
outtimer = settimeout(sets.outevent, sets.outduring);
});
});
}
})(jquery);
这段代码的目的在于让鼠标经过事件和延时分离的出来，延时以及延迟的清除都已经由此方法解决了。您所要做的，就是设定延时的时间大小，以及相应的鼠标经过或是移除事件即可。举个简单的例子吧，如下代码：
复制代码 代码如下:
$(#test).hoverdelay({
hoverevent: function(){
alert(经过我！);
}
});
表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我！”文字字样的弹出框。
ok，现在应用到本文的实例上。
腾讯网的首页的搜索框上面除了鼠标经过延时，其换肤也是值得一提的，关于换肤我之前也提过，在jquery-马化腾产品设计与用户体验的一些技术实现一文中，相应的demo页面您可以狠狠地点击这里：腾讯首页个性化换肤demo页面
首先，展示下腾讯首页搜索栏的主要html结构域代码：
复制代码 代码如下:
网页
图片
视频
音乐
搜吧
问问
博客
更多▼
综合
新闻
词典
生活
百科
所有产品
与先首页代码几乎一致，如假包换。应用了本文没什么技术含量的延迟方法后，可以应用如下的代码实现延迟执行。
复制代码 代码如下:
$(.s2).each(function(){
$(#sosofod h3).each(function(){
var that = $(this);
var id = that.attr(id);
if(id){
that.hoverdelay({
hoverevent: function(){
$(.s1).attr(class,s2);
that.attr(class,s1); //感谢“type23”提供了绑定对象方法
$(this).attr(class,s1);
}
});
}else{
that.hoverdelay({
outduring: 1000,
hoverevent: function(){
$(#tm).show();
},
outevent: function(){
$(#tm).hide();
}
});
}
});
唉，惭愧，代码就这样，没什么技术含量的，希望对有用的有用吧。“更多”的下拉鼠标移出后1000毫秒后下拉框隐藏。
基本上都是代码在撑页面，说点有用的东西吧。
hoverdelay方法共四个参数，表示意思如下：
hoverduring       鼠标经过的延时时间
outduring          鼠标移出的延时时间
hoverevent        鼠标经过执行的方法
outevent         鼠标移出执行的方法