jQuery 鼠标事件之mouseover()和mouseout()事件

在学JS的时候，大家还记得有两个方法叫移入移出事件吗？onmouseover()与onmouseout()事件~

jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似

下面我们通过一个实例进行讲解

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mouseover()和mouseout()</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            border:1px solid #000;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div></div>


    <script>
         $("div").mouseover(function(){
            $('div').css("background",'red');
         })

         $("div").mouseout(function(){
             $('div').css("background",'green');
         })
    </script>
</body>
</html>

当鼠标放到div标签上时，背景色会变为红色，当鼠标离开div标签时，变为绿色

新建文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mouseover()和mouseout()</title>
	<style type="text/css">
		div{
			width:200px;
			height:200px;
			border:1px solid #000;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
	<div></div>


	<script>
	 	$("div").mouseover(function(){
			$('div').css("background",'red');
	 	})

	 	$("div").mouseout(function(){
	 		$('div').css("background",'green');
	 	})
	</script>
</body>
</html>

提交重置代码

自动运行

全屏