<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트</title>
<script src="js\jquery-3.5.0.min.js"></script>
<style>
.box1{
width: 500px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<ol>
<li>mouseenter - 마우스호버 </li>
<li>mouseleave - 마우스 아웃</li>
</ol>
<hr>
<div class="box1">mouseover/moseout</div>
<script>
$(function(){
$('.box1').mouseenter(function(){
$('.box1').css({'background-color':'pink'})
});
$('.box1').mouseleave(function(){
$('.box1').css({'background-color':'yellow'})
});
});
</script>
</body>
</html>
