SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

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>
 

css
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

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

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

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 93,297 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

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

© SIRSOFT