当鼠标指针悬停在所选元素上时,hover()方法指定两个要运行的函数。
此方法同时触发mouseenter和mouseleave事件。
调用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 | (可选)当鼠标指针离开元素时执行的函数 |