[날마다 3분 CSS] 가상클래스 :hover

:hover는 CSS의 가상 클래스로 웹 브라우저에서 사용자의 마우스가 요소에 올라가면 활성화된다.

아래는 마우스를 올리면 넓이와 높이가 커지며 박스색깔이 빨간색으로 바뀌는 hover 효과입니다.

//main.css .box1:hover { width: 300px; height: 300px; background-color: red; }

css 선택자뒤에 :hover 붙여 코드를 작성합니다.

//main.css .box1 { width: 100px; height: 100px; background-color: orange; }

위에서 보듯이 마우스가 올라가기전( .box1 ) css와 마우스가 올라간 후( box1:hover )의 css를 볼 수 있다.
넓이/높이 100px의 오렌지 색깔 박스가 마우스가 올라갔을 때 넓이/높이 300px의 빨간색 박스로 변하는 코드이다.

 

이렇게 마우스가 올라갔을 때 와 올라가지 않았을 때 전과 후의 상태를 정의하여 요소가 변하는 효과를 줄 수 있는 것이다.

💫실습

- 주황색 박스에 마우스 올려보세요!!

 

See the Pen hover by Zookeeper0 (@zookeeper0) on CodePen.

위의 codepen의 코드와 같이 변하기전 css인 .box1의 마지막 속성으로 transition : 1s; 를 볼 수있다.
:hover 가상클래스 사용시 transition 코드와 함께 사용하면 자연스럽게 페이드인-아웃되는 효과를 낼 수 있어서
상당히 좋은 조합이다.