jquery 또는 자바스크립트를 사용해 마우스가 특정 엘리먼트에 들어왔을때 이벤트를 발생하게 하는 방법에 대하여 알아보고자 합니다. 우선 아래와 같이 두 가지 방법이 존재합니다.

#1 마우스오버(마우스엔터), 마우스 올렸을때
.mouseenter()
// mouseover() 메소드를 사용한 방법

.on('mouseenter', function();)
// mouseover 이벤트를 사용한 방법


#2 마우스아웃, 마우스 벗어났을때
.mouseleave()
// mouseout() 메소드를 사용한 방법

.on('mouseleave', function();)
// mouseleave 이벤트를 사용한 방법


두 가지 모두 동일한 결과를 가져옵니다. 그럼 아래 예제를 보세요.

<html>
<head>
<style type="text/css">
width: 160px;
height: 90px;
background: #dcdcdc;
text-align:center;
</style>
</head>

<body>
<div id="test">Place your mouse on here.</div>
</body>

<script type="text/javascript">
$("#test").mouseover(function(){$(this).css("color", "red");}
$("#test").mouseleave(function(){$(this).css("color", "black");}
</script>
</html>


아래 레이어에 마우스를 올리거나 벗어나게 되는 경우 해당하는 이벤트가 발생하게 됩니다.

Place your mouse on here.