그림 13-11을 보면 마지막 사각형만 배경색이 다릅니다. 이는 사각형에 마우스를 올리면 배경색이 변하게 설정해서 그렇습니다. 이 부분은 다음 코드처럼 :hover 가상 클래스 선택자를 사용해 처리합니다.
13/end/css/what_i_do.css - What I Do 영역 사각형 배경 처리
/* do-inner 클래스에 마우스를 올리면 배경색과 텍스트 색상 변경 */
section .do-me .do-inner:hover{
background-color:lightcoral;
color:white;
}
/* do-inner 클래스에 마우스를 올리면 아이콘 폰트 색상 변경 */
section .do-me .do-inner:hover i{
color:white;
}
여기까지 코드를 작성하고 실행해서 그림 13-11과 똑같이 보이는지 확인해 보세요.