CSS hover 에 관해 질문 드려요..
본문
아래의 소스와 첨부한 이미지에 보면
각각의 탭에 오버했을때 div의 배경칼라를 바꾸고 싶은데 잘 않돼네요...
조언 부탁 드립니다.
감사합니다.
<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 를 이용하여 구현하는 방법 이 있을것 같네요
호버하는 클래스? 가 없는데요 .test:hover {} 이렇게라도 하면 되요
<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선택자는 없는 걸로 알고 있습니다. <= 이 부분은 제가 틀릴 수도 있으니 구글신에서 검색하셔서 부모태그를 선택하는 선택자가 있다면 그걸 사용하시면 되고, 없다면
자바스크립트를 통해 구현 하시면 될 듯 합니다.