站三界导航
首页 jQuery代码Jquery的鼠标移入移出事件

Jquery的鼠标移入移出事件

  • jQuery代码
  • 来源:站三界导航
  • 143阅读
  • 2022-09-27

Jquery的鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
	</head>
	<body>
		<div id="one" style="width: 50px; float: left;">
			<p>背景色</p>
		</div>
		<div id="two" style="width: 50px; float: left; margin: 16px 10px;">
			<span>背景色</span>
		</div>
		<script type="text/javascript">
			// 鼠标移入事件
			$("p").mouseover(function(){
				$("p").css("background-color","#00ffff");
			});
			// 鼠标移出事件
			$("#one p").mouseout(function(){
				$(this).css("background-color","#E9E9E4");
			});
			
			// 鼠标移入事件
			$("#two").mouseover(function(){
				$(this).css("background-color","#00ffff");
			});
			// 鼠标移出事件
			var two=$("#two");
			two.mouseout(function(){
				two.css("background-color","#E9E9E4");
			});
		</script>
	</body>
</html>
本文结束
本文来自投稿,不代表站三界导航立场,如若转载,请注明出处:https://www.zhansanjie.com/article/details/10517.html

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、本文由会员转载自互联网,如果您是文章原创作者,请联系本站注明您的版权信息。

分享
相关文章 更多 >>
随机网站 更多 >>
最新小程序 更多>>
最新公众号更多>>
站三界导航
本站声明:本站严格遵守国家相关法律规定,非正规网站一概不予收录。本站所有资料取之于互联网,任何公司或个人参考使用本资料请自辨真伪、后果自负,站三界导航不承担任何责任。在此特别感谢您对站三界导航的支持与厚爱。