jQuery自定义方法之hover()

定义和用法
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")。