jQuery hover事件简单实现同时绑定2个方法

本文实例讲述了jQuery hover事件简单实现同时绑定2个方法。分享给大家供大家参考，具体如下：

这里将hover事件同时挂2个方法：

1个是悬停的时候执行的，另外一个是离开的时候执行

代码如下：

$(document).ready(function() {
$("#orderedlist li").hover(
function() {$(this).addClass("blue");},
function() {$(this).removeClass("blue");}
);
});

PS：上面的代码小编没有进行格式化处理，这里顺便为大家推荐几款在线代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中多个元素的Hover事件解决方案

    jQuery中多个元素的Hover事件解决方案

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: 复制代码 代码如下: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的区域时触发fun1,离开时触发fun2.你也许

  • jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码 代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候 菜单还没加载出来呢,所以就要用到

  • JQuery中使用on方法绑定hover事件实例

    文本教你用on方法,模拟hover方法. 代码如下: 复制代码 代码如下: $(obj).on("mouseover mouseout",function(event){  if(event.type == "mouseover"){   //鼠标悬浮  }else if(event.type == "mouseout"){   //鼠标离开  } }) 赶紧去试试吧~

  • 使用jquery hover事件实现表格的隔行换色功能示例

    jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常

  • jQuery实现hover合成事件的方法

    jQuery实现hover合成事件的方法

    本文实例讲述了jQuery实现hover合成事件的方法.分享给大家供大家参考.具体如下: jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • jquery中取消和绑定hover事件的实现代码

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

  • 完美解决jQuery的hover事件在IE中不停闪动的问题

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了N久,没有找到解决方法.在这里吐槽一下,百度太2了,收录的内容都没什么价值,最后还是在google找到了解决方法,下面就把这个jQuery的hover在IE中会导致不停闪动的解决方法教给大家. $("#category ul").find("li").each(

  • 使用jquery给新生的th绑定hover事件的实例

    这是昨天在做一个动态的table时遇到的一个小问题,table的th需要让鼠标在移入和移出时显示颜色变化,之前th是固定写死的,直接可以用jquery的hover()方法来实现.现在th需要用js/ajax来动态生成加载到页面,用hover()也就没效果了(因为要重新给th绑定mouseover和mouseout事件,而且考虑到可能会有多次加载th等情况,bind也要多次绑定,比较麻烦),在这里我使用了live来解决给新生的th绑定hover事件: 代码如下: $(function(){ //.

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • jQuery 鼠标经过(hover)事件的延时处理示例

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

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

随机推荐