마우스를 올려 놓을 때 이벤트 발생 예제

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; // 끝 값

    }

}