(JS) JavaScript에서 hover의 기능 구현하기 + Jquery를 이용하여 hover 구현하기
event4_hover.html
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>hover(mouseover + mouseout)</title>
<style>
#box{
width:100px; height: 100px;
border:3px solid black;
}
#box.hover{
background:orange;
color:white;
}
</style>
</head>
<body>
<div id="box">
<p>마우스를 올려 주세요</p>
</div>
<script type="text/javascript">
/* 이벤트 변환시 마다 체크 addEventListener */
var box = document.getElementById('box');
//마우스 오버
box.addEventListener('mouseover',function(){
box.setAttribute('class','hover');
});
//마우스 아웃
box.addEventListener('mouseout',function(){
box.removeAttribute('class');
});
</script>
<!--
javascript에서는 hover가 없다.
따라서 mouseover와 mouseout이벤트를 이용하여
순차적으로 구현하여 hover를 흉내내야 한다.
위의 코드는 그러한 내용이며,
만약 jQuery를 이용한다면 아래와 같이 할 수 있다.
출처:W3schools
https://www.w3schools.com/jquery/event_hover.asp
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
-->
</body>
</html>
감사합니다.
댓글