jQuery鼠标移动事件

最新推荐文章于 2022-09-19 20:36:07 发布

洋哥在线写BUG

最新推荐文章于 2022-09-19 20:36:07 发布

阅读量240

点赞数

文章标签： jQuery鼠标移动改变颜色

本文链接：https://blog.csdn.net/Cui6023056/article/details/102672834

版权

jQuery鼠标移动事件

鼠标移动改变颜色。和第一篇灯泡的作用相当
本内容由jQuery语言编写附带css样式
小小程序记录一下成长，希望对初学者有用
第一种方法

<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<style>
			.color {
				height: 50px;
				width: 50px;
				background-color: chartreuse;}
			.red {
				height: 50px;
				width: 50px;
				background-color: red;
				}
		</style>
	</head>
	<body>
		<div class="color"></div>
		<script type="text/javascript">
			$(function() {
				$("div").mouseover(function() {
					$(this).addClass("red");
				});
				$("div").mouseout(function() {
					$(this).removeClass("red");
				});
			});
		</script>
	</body>

第二种方法：只改变script中的内容即可。因本人不善于录屏就不做演示了(正在学习中）

<body>
		<script type="text/javascript">
			$(function(){
				$("div").hover(function(){
					$(this).addClass("red");
				},function(){
					$(this).removeClass("red");
				});
			});
		</script>
	</body>

洋哥在线写BUG

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery鼠标移动事件

jQuery鼠标移动事件鼠标移动改变颜色。和第一篇灯泡的作用相当本内容由jQuery语言编写附带css样式小小程序记录一下成长，希望对初学者有用第一种方法<head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></scr...
复制链接

扫一扫