안녕하세요. 혀코입니다.
이번 시간에는 jQuery에서 mouseenter와 mouseleave를 사용하는 방법에 대해서 알아보겠습니다
jQuery에서 mouseenter와 mouseleave를 사용하면, 특정 html 요소에 마우스를 올려놓거나 내려놓거나 할때의 이벤트를 잡아서 이펙트를 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery - mouseenter</title>
<style>
* {
margin: 0;
padding: 0;
}
.mouse-enter {
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="mouse-enter">
<p>Hello</p>
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('.mouse-enter').mouseenter(function(){
$('.mouse-enter p').text('Mouse is entered');
});
$('.mouse-enter').mouseleave(function(){
$('.mouse-enter p').text('Mouse is left')
})
</script>
</body>
</html>mouseenter는 mouse가 클래스가 mouse-enter인 html 요소에 올려지게 되면, 해당 이벤트를 감지하게 되고, 위 코드에서 function(){}을 사용해서 이펙트 효과를 구현했습니다.. 여기서는 text를 사용해서 클래스가 mouse-event인 html 요소안의 p 태그를 찾아 그 해당 텍스트를 Mouse is entered로 변경했습니다.
mouseleave는 mouse가 클랙스가 mouse-enter인 html 요소에 내려지게 되면, 해당 이벤트를 감지하게 되고, 위 코드에서 function(){}을 사용해해서 이펙트 효과를 구현했습니다. 여기서는 text를 사용해서 클래스가 mouse-event인 html 요소안의 p 태그를 찾아 그 해당 텍스트를 Mouse is left로 변경했습니다.
이렇게 jQuery에서 mouseenter와 mouseleave를 사용하는 방법에 대해서 알아봤습니다
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글