-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
transform 3번째 강의 질문
23.03.28 18:47 작성 조회수 213
0
transform 3번째 강의에서
10분 35초에 .box의 span 태그에 hover 가상선택자를 부여하는 건데 왜 .box:hover span와 같이 작성해야 하는 건지 궁금합니다!
.box span:hover로 해봤을때 생각한대로 적용이 안되어서 저게 틀렸다는 건 알겠는데 왜 틀렸는지와 왜 .box:hover span와 같은 순서로 작성을 해야 하는 지 이해가 안갑니당
답변을 작성해보세요.
0
코드캠프 프론트엔드 멘토
2023.03.30
안녕하세요!
.box span:hover은 .box 내부의 span 요소에 마우스 오버가 될 때 스타일을 적용합니다.
반면 .box에는 마우스 오버가되어도 span 요소에는 스타일이 적용되지 않습니다.
하지만 .box:hover span은 .box에 마우스 오버가 될 때 내부의 모든 span 요소에 스타일을 적용합니다.
즉, .box와 그 내부의 span 요소 모두에 스타일이 적용됩니다.
스타일을 적용하는 범위의 차이라고 보시면 될 것 같습니다.
hover가 되어 스타일이 적용될 대상이 span인지, box인지 구분되어야하기 때문에 순서가 중요하다 보시면 됩니다.
감사합니다.😄
답변 1