본문 바로가기

[HTML/CSS] 마우스오버 효과

728x90
반응형

 

 

 

1. 마우스오버 시 다른 이미지로 교체하기

 

<a href="#">
	<img src="기본이미지" onmouseover="this.src='마우스오버이미지'" onmouseout="this.src='기본이미지'" border="0">
</a>

 

 

 

 

2. 마우스오버 시 버튼 누르는 효과 주기

 

.img:hover { position: relative; top: 2px; left: 2px; }

 

img라는 이름의 클래스를 가진 요소에 마우스를 올리면 버튼처럼 눌리는 효과가 나타난다.

 top: 2px ,  left: 2px 은 각각 위, 왼쪽에서 2px만큼 이동하는 것이므로, 버튼이 눌리는 움직임을 크게 혹은 작게 하려면 2px의 값을 변경하면 된다.

 

 

 

728x90
반응형