jQuery hover() 方法

jQuery 事件

当鼠标指针悬停在所选元素上时,hover()方法指定两个要运行的函数。

此方法同时触发mouseentermouseleave事件。

调用hover()方法是简写:;$(selector).mouseenter(function_in).mouseleave(function_out)

注意:当传递单个函数时,hover()方法将对mouseenter和mouseleave事件都执行该函数。

语法:

$(selector).hover(function_in, function_out)

示例

当鼠标指针悬停在上方时,更改所有<p>元素的背景颜色:

$("p").hover(function(){
  $(this).css("background-color", "yellow");
  }, function(){
  $(this).css("background-color", "lightblue");
});
测试看看‹/›

添加特殊样式以列出要悬停的项目:

$(document).ready(function(){
  $("li").hover(function(){funcIn(this);}, function(){funcOut(this);});
});

function funcIn(x) {
  $(x).html("鼠标<b>ENTER</b> 按下事件被触发");
  $(x).css("background", "yellow");
}

function funcOut(x) {
  $(x).html("触发鼠标离开事件");
  $(x).css("background", "white");
}
测试看看‹/›

如果仅指定一个函数,则将同时为mouseenter和mouseleave事件运行该函数:

$("div").hover(function(){
  $(this).css("background", randColor());
});

// 获取随机颜色函数
function randColor() {
  return 'rgb(' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + 
  ',' + Math.floor(Math.random()*256) + ')';
}
测试看看‹/›

参数值

参数描述
function_in当鼠标指针进入元素时执行的功能
function_out(可选)当鼠标指针离开元素时执行的函数

jQuery 事件