CSS hover 에 관해 질문 드려요..

CSS hover 에 관해 질문 드려요..

QA

CSS hover 에 관해 질문 드려요..

본문

아래의 소스와 첨부한 이미지에 보면 

각각의 탭에 오버했을때 div의 배경칼라를 바꾸고 싶은데 잘 않돼네요...

조언 부탁 드립니다. 

감사합니다.

 

32288393_1605969679.9784.png

<style>
.bs_tab_bg {background:#FF6600}

.bs_tab_1_bg {background:#368EA9}
.bs_tab_2_bg {background:#22C61A}
.bs_tab_3_bg {background:#6821BE}
.bs_tab_4_bg {background:#A2D20D}

.tab_1 {}
.tab_2 {}
.tab_3 {}
.tab_4 {}
</style>

<div class="bs_tab_bg">
<ul>
 <li class="tab_1">명사</li>
 <li class="tab_2">형용사</li>
 <li class="tab_3">동사</li>
 <li class="tab_4">부사</li>
</ul>
</div>
 

이 질문에 댓글 쓰기 :

답변 4

자바스크립트를 사용하지 않고 순수 css 만으로 원하시는 스타일을 구현한다면 여러가지 방법이 있겠으나,

각각의 li에 가상클래스 before를 이용하여 구현하는 방법 또는

li 태그를 하나 더 추가하여 position:absolute 를 이용하여 구현하는 방법 이 있을것 같네요

<style>
.bs_tab_bg {background:#FF6600}

.tab_1:hover {background-color:#368EA9}
.tab_2:hover {background-color:#22C61A}
.tab_3:hover {background-color:#6821BE}
.tab_4:hover {background-color:#A2D20D}
</style>

tab1234에 hover 되었을때 부모태그의 배경색을 배경색을 바꾸려는 의도신거 같은데

부모태그를 선택할 수 있는 css선택자는 없는 걸로 알고 있습니다. <= 이 부분은 제가 틀릴 수도 있으니 구글신에서 검색하셔서 부모태그를 선택하는 선택자가 있다면 그걸 사용하시면 되고, 없다면

자바스크립트를 통해 구현 하시면 될 듯 합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 720
QA 내용 검색
filter #sql ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT