mouseover 和 hover 方法

mouseover 和 hover 方法的不同?jquery

hover包括了鼠标移到对象上,同时鼠标再移出对象的过程,相应的子类也被选中。

mouseover是鼠标经过对象时,不包含他的子类同时被选中。

主要区别在于 hover元素的子类上也有添加了事件驱动。而mouseover 只对当前元素添加事件驱动。

且 hover 事件包含mouseover 事件

mousemove(fn);

在每一个匹配元素的mousemove事件中绑定一个处理函数。

hover(over, out);

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(对子类的检测),如果是,则会继续保持“悬停”状态,而不触发移出事件(mouseout)。

$("td").hover(
     function () {
    $(this).addClass("hover");
  },
     function () {
    $(this).removeClass("hover");
  }
);

在jquery源码中有这么一段:hover: function( fnOver, fnOut ) {return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );}

也就是说 hover!= mouseover+mouseout。但hover=mouseenter + mouseleave。

从前只知道像 hover、link、visited 和 active 这样的伪类只能应用到 a 标签,即要写成 a:hover、a:link、a:visited、a:active。其实这四个玩意是可以应用到其他的 html 标签、指定给其他定义的 class 上。

有关于 CSS 伪类可参考:http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

 
时间: 2024-10-05 03:33:23

mouseover 和 hover 方法的相关文章

Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 版本后该方法触发 mouseover和 mouseout事件. 语法 $(selector).hover(inFunction,outFunction)//inFunction 必需,规定 mouseover 事件发生时运行的函数:outFunction 可选,规定 mouseout 事件发生时运

JQuery入门——事件切换之hover()方法介绍

所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle(),感兴趣的朋友不妨了解下,或许对你有所帮助. 1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码:

jQuery hover() 方法 -《狗嗨默示录》-

jQuery hover() 方法 实例 当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色: $("p").hover(function(){    $("p").css("background-color","yellow");},function(){    $("p").css("background-color","pink");}); 尝试一

【jquery】hover方法

方法名称:hover(over, out) 概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数. 参数: 1) overFunction 鼠标移到元素上要触发的函数 2) outFunction 鼠标移出元素要触发的函数 例子: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content=&q

94 添加hover方法 和show hide 方法

var $=function(_this)//调用,把this传递过来 { return new Base(_this); }; //对象式 function Base(_this) { //创建一个数组来获取节点和节点的数组 this.elements=[];//私有化,不共用 if(_this!=undefined)//这里的_this是一个对象,undefined也是个对象,却别typeof放回的带单引号的 "undefined" { this.elements[0]=_this

通过CSS效果:隔行变色和鼠标掠过高亮,学习JQuey的css()、hover()方法

下面的HTML和CSS能够实现div的隔行变色: <head> <style> #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ background-color: #FAFAFA; } </style> </head> <body&

jQuery的hover()方法(笔记)

因为mouseover和mouseout经常一起写,所以出现了hover() hover(function(){},function(){});第一个参数为鼠标移入运行的函数,第二个为鼠标离开运行的函数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ht

jQuery hover() 方法

1 $("p").hover(function(){ 2 $("p").css("background-color","yellow"); 3 },function(){ 4 $("p").css("background-color","pink"); 5 }); 语法 $(selector).hover(inFunction,outFunction) 调用: $(

Jquery的hover方法让鼠标经过li时背景变色

来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h