Inflearn Community Q&A
asked
모바일 화면에서 hiring의 sns 문제- 해결 하였는데 이해 안되는 부분 질문
Written on
·
148
1
강사님, 나름 해결을 하였는데.. 잘 이해가 안되어서 추가 질문 드립니다.
980px, 768px, 486px 이하 scrolling 화면 mode에서 responsive.css 의 .sns a:nth-child()::before 적용 안되는 부분을 .sns a:hover:nth-child()로 고쳐 주었더니 해결이 되었습니다.
그런데 pc 화면에서는 .sns a:nth-child()::before 로 잘 작동되는데 왜 모바일 화면에서는 적용이 안되어 .sns a:hover:nth-child() 수정해 줘야 되는건지 잘 이해가 안갑니다. 설명 부탁 드리겠습니다.
HTML/CSSjquery웹 디자인반응형-웹
Answer 1
0
codingworks
Instructor
.sns a:nth-child(n)::before 이렇게 선택자 하시는게 맞습니다.
.sns a:hover:nth-child(n) 이 선택자는 잘 못되었습니다. 아래처럼 하셔야 합니다.
.sns a:nth-child(n):hover
그리고 PC와 모바일이 다르지 않습니다.
.sns a:nth-child(1)::before
sns a:nth-child(2)::before
sns a:nth-child(3)::before
이렇게 배경색상을 다르게 하시고 호버는 1번만 하시면 됩니다.
.sns a:nth-child(n):hover 라고 하지 마시고 .sns a:hover