잡동사니에도 사랑을

[21.10.06] exam04(02_jQueryEvent) - Hover이벤트 확인(Mouse Enter Event (onMouseOver), Mouse Leave Event (onMouseOut)) 본문

JAVA_EE/JQuery

[21.10.06] exam04(02_jQueryEvent) - Hover이벤트 확인(Mouse Enter Event (onMouseOver), Mouse Leave Event (onMouseOut))

luvforjunk 2021. 10. 7. 01:45
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Hover 이벤트 확인하기</h1>
<div id="input">
	Mouse Over or Out
</div>
<h2>결과</h2>
<div id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#input').hover(function(){
		$('#result').html("Mouse Enter Event (onMouseOver)");
	}, function(){
		$('#result').html("Mouse Leave Event (onMouseOut)");
	});
});
</script>
</body>
</html>

<!-- 
exam02처럼 따로따로 함수를 만들어줘도 되고
hover를 사용하여 한번에 처리할 수도 있다
 -->

 

 

결과1 - 마우스를 올렸을 때

 

결과2 - 마우스를 창에서 내렸을 때

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.06] exam06(02_jQueryEvent) - KeyName(keyCode)  (0) 2021.10.07
[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)  (0) 2021.10.07
[21.10.06] exam03(02_jQueryEvent) - 클릭 이벤트 확인(click, dbclick)  (0) 2021.10.07
[21.10.06] exam02(02_jQueryEvent) - 마우스 이벤트 확인(mousedown, mouseup, mouseenter, mouseleave)  (0) 2021.10.07
[21.10.06] exam01(02_jQueryEvent) -  (0) 2021.10.06
'JAVA_EE/JQuery' Related Articles more