[CSS] 가상클래스 - 마우스 오버 효과(hover, transition)

 

 

마우스를 올리면 :hover로 디자인이 변경되고, transition으로 애니메이션 효과가 들어간다.

 

실습 1

html

a 태그의 href를 비워놓으면 나중에 제이쿼리가 작동하지 않기에, #none을 작성해 두는 게 좋다.

 

css

transition 속성은 :hover가 아닌 곳에 작성해야 한다.

(a 태그는 body 태그의 color를 따르지 않는다.)

 

 

출력

마우스를 올린 곳에 효과가 적용되는 것을 확인.

 

실습 2

html

css

 

출력

마우스를 올리면 0.5s 동안 서서히 검은색으로 바뀌고 마우스를 빼면 0.5s동안 원래대로 돌아간다.