切换事件hover、mouse事件、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()...)

Toggle点击事件是一种交替执行的事件,通常用于在不同的点击之间切换状态或执行不同的操作。在jQuery中,可以使用toggle方法来实现这个功能。toggle方法可以接受多个参数,每个参数都是一个要交替执行的事件。如果不传参,默认是显示和隐藏功能。 另外,在Toggle Group中挂载脚本,可以给Toggle按钮添加事件,并将Toggle Group作为参数传递给方法。这样,方法就可以根据Toggle按钮的状态来执行相应的操作。 在具体的应用场景中,例如左菜单的展开和折叠功能,可以使用toggle点击事件来实现。通过给菜单按钮添加点击事件,并使用动画效果来实现菜单的动态展开和折叠。 总结来说,toggle点击事件是一种在不同的点击之间切换状态或执行不同操作的事件,可以使用jQuery的toggle方法来实现。对于特定的应用场景,可以通过给Toggle按钮添加事件,并传递相应的参数来实现不同的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [jquery中交替点击事件toggle方法的使用示例](https://download.csdn.net/download/weixin_38516491/13053414)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Unity技术手册-UGUI零基础详细教程-Toggle切换](https://blog.csdn.net/qq_27489007/article/details/127527965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Python UI设计学习笔记,第五课:左菜单toggle按钮的点击事件:展开和折叠左侧菜单,学习使用动画 `...](https://blog.csdn.net/u012928587/article/details/124546754)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值