인프런 커뮤니티 질문&답변

1) 선택요소:hover {...}
ex) div:hover { background-color: red; }

2) 부모요소:hover 자식요소 {...}
ex) div:hover span { background-color: red; }

1번의 경우 선택요소에 마우스가 올라가면 그 선택요소의 디자인을 변경합니다.
곧, div의 배경색이 red가 됩니다.

2번의 경우 부모요소에 hover되면 그 부모요소의 자식요소의 디자인을 변경합니다.
곧, div 내의 자식요소인 span의 배경색이 red가 됩니다.

참고로 2번의 경우 html은 부모자식 관계로 되어 있어야만 합니다.

<div>  <!-- 부모요소 -->

        <span>...</span> <!-- 자식요소 -->

</div>