Jquery中toggleClass的两种用法

最新推荐文章于 2025-03-15 15:58:38 发布

my-onlyone

最新推荐文章于 2025-03-15 15:58:38 发布

阅读量1.7k

点赞数 1

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/mylftnt/article/details/10541189

版权

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery为DOM元素动态地添加或移除CSS样式类。通过两种不同的方法实现鼠标悬停效果，使元素背景颜色发生变化。第一种方法利用mouseover和mouseout事件结合自定义函数实现，第二种方法则直接绑定mouseover和mouseout事件处理程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式：

<style type="text/css">
.bgc{ background-color:#F00; color: #FFF}
</style>

Jquery代码：

第一种用法：

1.	<script type="text/javascript">
	$(function(){
		$("#child").mouseover(setColor).mouseout(setColor);
		function setColor(){
			$(this).toggleClass("bgc");
			}
	});

第二种用法：

2.	<script type="text/javascript">
	$(function(){
		$("#child").bind("mouseover mouseout",function(){
			$(this).toggleClass("bgc");
			});
	});	
</script>