hover()
将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
.hover(handlerIn(eventObject), handlerOut(eventObject))
- hover(handlerIn(eventObject), handlerOut(eventObject))
.hover(handlerInOut(eventObject))
- hover(handlerInOut(eventObject))
hover(handlerIn(eventObject), handlerOut(eventObject))
将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
.hover(handlerIn(eventObject), handlerOut(eventObject))
- handlerIn(eventObject)类型:Function()。当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject)类型:Function()。当鼠标指针离开元素时触发执行的事件函数
.hover()
方法是同时绑定mouseenter
和mouseleave
事件。我们可以用它来简单地应用在鼠标在元素上行为。
调用$(selector).hover(handlerIn, handlerOut)
是以下写法的简写:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
更多细节参见.mouseenter()
和.mouseleave()
。
例子
当鼠标在列表中来回滑动的时候添加特殊的样式, try:
<!DOCTYPE html> <html> <head> <style> ul { margin-left:20px; color:blue; } li { cursor:default; } span { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <ul> <li>Milk</li> <li>Bread</li> <li class='fade'>Chips</li> <li class='fade'>Socks</li> </ul> <script> $("li").hover(function () { $(this ).append($("<span> ***</span>")); },function () { $(this ).find("span:last").remove(); } ); //li with fade class $("li.fade").hover(function (){$(this ).fadeOut(100);$(this ).fadeIn(500);}); </script> </body> </html>
- Milk
- Bread
- Chips
- Socks
当鼠标在表格单元格中来回滑动的时候添加特殊的样式, try:
$("td").hover(function () { $(this ).addClass("hover"); },function () { $(this ).removeClass("hover"); } );
解除绑定上面的例子中使用:
$("td").unbind('mouseenter mouseleave');
hover(handlerInOut(eventObject))
将一个单独事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
.hover(handlerInOut(eventObject))
- handlerInOut(eventObject)类型:Function()。当鼠标指针进入或离开元素时触发执行的事件函数
当传递给.hover()
方法一个单独的函数的时候,将执行同时绑定mouseenter
和.mouseleave()
事件函数。这允许在处理函数中用户使用jQuery的各种切换方法或响应处理程序内的不同的event.type
。
调用$(selector).hover(handlerInOut)
是以下写法的简写:
$(selector).bind("mouseenter mouseleave", handlerInOut);
更多细节参见.mouseenter()
和.mouseleave()
。
例子
向上或向下滑动显示或隐藏下一个兄弟 LI 节点,并切换样式。
<!DOCTYPE html> <html> <head> <style> ul { margin-left:20px; color:blue; } li { cursor:default; } li.active { background:black;color:white; } span { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <ul> <li>Milk</li> <li>White</li> <li>Carrots</li> <li>Orange</li> <li>Broccoli</li> <li>Green</li> </ul> <script> $("li") .filter(":odd") .hide() .end() .filter(":even") .hover(function () { $(this ).toggleClass("active") .next().stop(true, true).slideToggle(); } ); </script> </body> </html>
- Milk
- White
- Carrots
- Orange
- Broccoli
- Green