jQuery常用事件#mouseover与mouseout应用案例

最新推荐文章于 2021-11-08 20:54:26 发布

CRUD_CODER_LIN

最新推荐文章于 2021-11-08 20:54:26 发布

阅读量1.6k

点赞数

分类专栏： JavaSE&JavaWeb

本文链接：https://blog.csdn.net/LINHONG_1994/article/details/99323689

版权

JavaSE&JavaWeb 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

mouseover([[data],fn])
在每一个匹配元素的mouseover事件中绑定一个处理函数。
mouseover事件会在鼠标移入对象时触发
mouseout([[data],fn])
在每一个匹配元素的mouseout事件中绑定一个处理函数。
mouseout事件在鼠标从元素上离开后会触发

场景应用：

新建一个“导航栏“，鼠标移入“导航栏”，背景色改变，鼠标移出导航栏，背景色成默认网页色，形成一个色差！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.bg_c{
	background-color:red;
}
</style>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
		    $("#nav").mouseover(function(){
		    	//添加背景添加
		    	$(this).addClass("bg_c");
		    }).mouseout(function(){
		    	$(this).removeClass("bg_c");
		    }); 
		});
</script>
</head>
<body>
<div id="nav" align="center">【导航栏测试】</div>
<div align="center">
<h3>用户注册</h3>
	<form action="">
			用户名:<input type="text" name="username" id="username">
			<span id="unameMsg"></span>
			<br/><br/>
			密&emsp;码:<input type="password" name="password" id="password">	
	</form>
	<br/>
</div>
</body>
</html>