mouse 이벤트

"> 03-02_mouse-2
mouse 이벤트

"> 03-02_mouse-2
mouse 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-02_mouse-2</title>
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
.picture {
	width: 200px;
	background-color: #CCCCCC;
}
.picture img {
	transform: translateX(-200px);
	transition: all 1s ease;
	vertical-align: top;
}
.picture img.on {
	transform: translateX(0);
}
button {
	width: 200px;
	height: 50px;
	border: none;
	background-color: #333333;
	font-size: 20px;
	font-weight: bold;
	color: white;
	cursor: pointer;
}

</style>
</head>
<body>
	<h1>mouse 이벤트</h1>
	<br/>
	<div class="picture">
		<img src="../../image/jquery_image/4.jpg"/>
	</div>
	<button>hover 이벤트</button>
	<!-- javascript -->
	<script type="text/javascript">
		$(document).ready(function(){
			$("button").hover(function(){
				$('.picture img').toggleClass("on");
			});
		});
	</script>
</body>
</html>