Dev/JavaScript

[Javascript] 마우스 오버, 아웃 기능 구현

늙은개발자 2020. 1. 28. 11:13
반응형

인터넷 웹페이지에서 마우스를 움직이다 보면 특정 위치에서 기능이 수행되는 경우를 볼 수 있습니다.

대표적인 예로 포탈 사이트의 실시간 검색에 마우스를 갖다 대면 리스트가 펼쳐지는 기능입니다. 이런 기능을 마우스 오버라고 하는데요. 이런 기능을 효과적으로 사용할 수 있는 Javascript 마우스 오버 기능을 알아보겠습니다.

 

문법

onmouseover 마우스가 특정 영역에 도달하면 이벤트 발생
onmouseout 마우스가 특정 영역에서 빠져나가면 이벤트 발생

Javascript 마우스 오버 코드

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<style type="text/css">
#test{
background-color: #F6CEF5;
width: 200px;
height: 200px;
font-size: 3em;
} 
</style>
<script type="text/javascript">

function mouse_over(){
	
	alert("마우스가 오버 됩니다.");
}

function mouse_out(){
	
	alert("마우스가 이탈합니다.");
}



</script>
</head>
<body>
<div id="test" onmouseover="mouse_over()" onmouseout="mouse_out()">
마우스 <br>테스트<br> 영역
</div>
</body>
</html>

기본 소스는 위와 같습니다.

기본 영역은 위와 같으며 마우스 테스트를 해보겠습니다.

해당 div에 마우스를 위치 시키면 위와 같이 지정한 function이 수행됩니다.

out도 마찬가지로 해당 영역에서 마우스가 벗어나면 작동합니다.

 

Jquery 소스

$(document).ready(function () {

	
	$("#test").mouseover(function(){
		alert("마우스 Over");
	});
	
	$("#test").mouseleave(function(){
		alert("마우스 Leave");
	});


});

Jquery 로 구현시 위와 같이, document ready 구문안에

위와 같이 마우스 오버, 리브 소스를 구현하시면 됩니다.

반응형