python中怎样要html鼠标悬停事件hoverhover的时间变长

在JQuery中提供了.hover()事件hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave即表示可以为hover传递两个参数。如下代码所示:

一、关于html鼠标悬停事件hoverhover事件及延時

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

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

例如,在腾讯网首页几乎对所有的html鼠标悬停事件hover经过事件进行了延时处理,例如其选项卡:

或是其顶部的搜搜导航条见下图:

本文的主要内容就是展示我前几天写的html鼠标悬停事件hover延迟的方法,jQuery下的方法水平拙劣,仅供参考本文就以腾讯网首页搜搜搜索栏的一些html鼠标悬停事件hover经过效果为实例,演示jQuery下的延时处理下图为demo页面的效果截图:

您鈳以狠狠地点击这里:

说到延时,离不开window下的setTimeout方法本实例的jQuery方法的核心也是setTimeout。代码不长完整如下:

这段代码的目的在于让html鼠标悬停事件hover经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了您所要做的,就是设定延时的时间大小以及相应的html鼠标悬停事件hover经过或是移除事件即可。举个简单的例子吧如下代码:

表示的含义是id为test的元素在html鼠标悬停事件hover经过后200毫秒后弹出含有“经过我!”文字字样的弹出框。

关于此js您可以狠狠地点击这里:(725字节)

ok,现在应用到本文的实例上

腾讯网的首页的搜索框上面除了html鼠标悬停事件hover經过延时,其换肤也是值得一提的关于换肤我之前也提过,在一文中相应的demo页面您可以狠狠地点击这里:

首先,展示下腾讯首页搜索欄的主要HTML结构域代码:

与先首页代码几乎一致如假包换。应用了本文没什么技术含量的延迟方法后可以应用如下的代码实现延迟执行。

唉惭愧,代码就这样没什么技术含量的,希望对有用的有用吧“更多”的下拉html鼠标悬停事件hover移出后1000毫秒后下拉框隐藏。

基本上都昰代码在撑页面说点有用的东西吧。
hoverDelay方法共四个参数表示意思如下:

月光大人曾说过与下面主要意思一样的话:写博客三五天写一篇偅量级的文章,隔个一天两天写个简单价值度偏低的文章,是比较不错滴本文就属于有凑篇数之嫌的价值相对偏低的文章。加上本身js還很稚嫩所以本文内容的方法一般般,仅供参考

对了,我是抱有疑问的如何在写jQuery插件组件这类公共方法时将当前对象传到设置的默認的方法中。例如本实例中如果将当前$(this)对象传到hoverEvent或是outEvent方法中呢,希望有高人不吝赐教

用jquery做html鼠标悬停事件hover悬停事件时莋了mouseover修改css属性。总是要做个mouseout还原css属性这样代码很长,有没有简单的写法让mouseover和mouseout在一起

 

你对这个回答的评价是?

下载百度知道APP抢鲜体验

使用百度知道APP,立即抢鲜体验你的手机镜头里或许有别人想知道的答案。

我要回帖

更多关于 html鼠标悬停事件hover 的文章

 

随机推荐