마우스 포인터가 특정 요소에 올라갔을 때 또는 떠났을때 나타나는 이벤트 메소드 중 하나인 hover()에 대해 알아보겠습니다.
javascript에서의 mouseenter, mouseleave의 기능을 하고있다고 볼 수 있으며, 저 둘의 기능을 hover메소드에 담아 각각 호출하지 않아도 된다는 특징이 있습니다.
hover 예제를 통하여 알아보겠습니다.
1.
<script>
$(document).ready(function() {
$("#htest").hover(function() {
$(this).css("background-color", "orange")
}, function() {
$(this).css("background-color", "aqua")
});
});
</script>
<body>
<h1 id="htest">hi</h1>
</body>
hover()는 마우스를 올렸을때와 내렸을 때의 기능을 구현할 수 있기 때문에 처음 함수에서는 마우스를 올렸을때의 기능을, 그 뒤의 함수에서는 마우스를 떠났을때를 나타냅니다.
출력결과↓
마우스에 영역을 올리지 않았을 때
마우스를 올렸을 때
마우스가 영역을 떠났을 때
아무동작도 하지 않았을 때 하얀배경에 검정색글씨(기본값)입니다.
마우스를 해당 영역에 올려놓았을때 주황색으로 배경색으로 바뀌었고 마지막에 나올때는 하늘색으로 처리가 됩니다.
'코딩 > jQuery' 카테고리의 다른 글
jQuery fadeIn, fadeOut, fadeToggle (0) | 2020.07.01 |
---|---|
jQuery setInterval, clearInterval (0) | 2020.06.30 |
JavaScript 실행순서 (0) | 2020.06.30 |
jQuery this란? (0) | 2020.06.27 |
jQuery 선택자(Selector)- id, class (0) | 2020.06.26 |
최근댓글