通过本文主要向大家介绍了鼠标经过,hover,事件,延时处理等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一、关于鼠标hover事件及延时
鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。
一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。
例如，在腾讯网首页，几乎对所有的鼠标经过事件进行了延时处理，例如其选项卡：
或是其顶部的搜搜导航条，见下图：
二、实例及演示
本文的主要内容就是展示我前几天写的鼠标延迟的方法，jQuery下的方法，水平拙劣，仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例，演示jQuery下的延时处理。下图为demo页面的效果截图：
三、代码与实现
说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下：
鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。
一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。
例如，在腾讯网首页，几乎对所有的鼠标经过事件进行了延时处理，例如其选项卡：
或是其顶部的搜搜导航条，见下图：
二、实例及演示
本文的主要内容就是展示我前几天写的鼠标延迟的方法，jQuery下的方法，水平拙劣，仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例，演示jQuery下的延时处理。下图为demo页面的效果截图：
三、代码与实现
说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下：
hoverDuring 鼠标经过的延时时间
outDuring 鼠标移出的延时时间
hoverEvent 鼠标经过执行的方法
outEvent 鼠标移出执行的方法