자바스크립트/DOM 예제
마우스를 올려 놓을 때 이벤트 발생 예제
Socratone
2020. 2. 27. 01:55
1. HTML
<img id="mountain" src="mountain.png">
2. CSS
.over {
margin: 100px;
}
3. JS
// 마우스를 올려놓을 때
document.getElementById('mountain').onmouseover = function() {
this.setAttribute('class', 'over');
};
// 마우스를 올려놓지 않을 때
document.getElementById('mountain').onmouseout = function() {
this.setAttribute('class', '');
};
그림 위에 마우스를 올려 놓으면
그림에 margin: 100px 값이 생기면서 움직인다.
4. 더 나아가서
CSS를 아래처럼 바꾸면 애니메이션 효과도 줄 수 있다.
// 마우스를 올려 놓으면 3초 동안 move라는 애니메이션 실행한다.
.over {
animation-name: move; // 이름
animation-duration: 3s;
}
@keyframes move {
from {
opacity: 0.2; // 시작 값
}
to {
opacity: 1; // 끝 값
}
}