jQuery自定义方法之hover()

我会带着你远行 2022-06-07 23:43 329阅读 0赞

定义和用法  
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。  
语法

$(selector).hover(inFunction,outFunction)

当光标移动到目标元素上时，会触发指定第1个函数(inFunction)；当移出这个元素时，会触发第2个函数(outFunction)。

调用:  
$( selector ).hover( handlerIn, handlerOut )  
等同以下方式：  
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );  
注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。  
调用:  
$(selector).hover(handlerInOut)  
等同于：  
$( selector ).on( "mouseover mouseout", handlerInOut );  
  
inFunction必需。规定 mouseover 事件发生时运行的函数。

outFunction可选。规定 mouseout 事件发生时运行的函数。

当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：

$(document).ready(function(){
    	$("p").hover(function(){
    		$("p").css("background-color","yellow");
    	},function(){
    		$("p").css("background-color","pink");
    	});
    });

代码运行后的效果与下面代码运行后的效果是一样的。

$(document).ready(function(){
    	$("p").mouseover(function(){
            $("p").css("background-color","yellow");
        });
        $("p").mouseout(function(){
            $("p").css("background-color","pink");
        });
    });

注意：CSS中有伪类选择符，例如":hover"，当光标悬停于元素上时，会改变元素的外观。伪类选择符可以用于任何元素。然而在IE 6浏览器中，伪类选择符仅可用于超链接元素。对于其他元素，可以使用jQuery的hover()方法。

hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")。因此当需要触发hover()方法的第2个函数时，需要用trigger("mouseleave")来触发，而不是trigger("mouseout")。