切换事件hover、mouse事件、toggle

最新推荐文章于 2023-07-07 16:10:41 发布

原创最新推荐文章于 2023-07-07 16:10:41 发布 · 2.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

7 篇文章

订阅专栏

本文深入探讨了JavaScript中的hover事件与animate方法的应用，包括如何实现悬停效果与动画移动，以及mouseenter与mouseleave事件的区别。同时介绍了toggle方法在切换状态时的使用，提供了丰富的示例代码。

1.hover事件(一个是悬停的时候执行，一个是离开的时候执行)

$(function)(){

$(" ").hover(function(){

//执行代码1

function(){

//执行代码2

}

)

hover(over, out);

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（对子类的检测），如果是，则会继续保持“悬停”状态，而不触发移出事件（mouseout）。

$("td").hover(
     function () { $(this).addClass("hover"); },
     function () { $(this).removeClass("hover"); }
 );

2.animate实现移动

$(function(){

	$(".v-link").hover(function(){

		$(this).siblings("div.vb-online").animate({top:"-=90"});

},

	function(){

		$(this).siblings("div.vb-online").animate({top:"+=90"});

})

});

2.mouseenter和mouseleave 与 hover类似

$("a").mouseenter(function(){

//执行代码一

})

$("a").mouseleave(function(){
//执行代码二
})

mouseover与mouseenter（mouseover从白色框和灰色框内移动也会触发，而mouseenter只有在鼠标离开最外面边框才会触发）

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

3.toggle（）方法

可以依次调用N个指定的函数

toggle（function1（），function2（），function3（）...）