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>

提交重置程式碼

自動運行

全螢幕