테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

CSS 부모 자식 관련 질문드립니다. 채택완료

임진강 5년 전 조회 3,468
답변 4
목록

<div class="nav" >

     <div class="menu"></div>

</div>

 

위와 같은 html 구조를 가질경우 menu:hover의 경우 상위요소인 nav의 background를 바꾸려고 합니다.

jquery를 사용하지 않고 css 만으로 어떻게 짜야 하나요?

 

#css #html #부모 #자식
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
s
sinbi Expert
5년 전

걍 동일하게 하시면 될 듯...

다만, 사이가 margin으로 벌어긴 구간에 허버 시엔 작동 안 하니, js 이용하셔야 할 듯...

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
임진강
5년 전
흠 .nav는 임시로 nav로 주긴 했지만 그 안에 다른 여러가지가 들어가서 .menu는 nav안의 일부라서 nav에 :hover를 주기엔 무리가 있네요 ㅠ js밖에 안된다면 그렇게 해야겠네요 ㅠ

댓글을 작성하려면 로그인이 필요합니다.

D
DSLOVE
5년 전

댓글로는 SyntaxHighlight 적용이 안되서,

답글로 한번 더 남겨드려봅니다 ㅎㅎ 이렇게 한번 해보세요!

 

</p>

<p><style></p>

<p>.nav {position:relative;}

.nav .menu {background:#000;}

.nav .menu ul:after {content:''; display:block; clear:both;}

.nav .menu .menu_li {float:left; width:200px; height:50px; line-height: 50px; text-align:center;}

.nav .menu .menu_li span {position:relative; z-index:3; color:#fff;}

.nav .menu .menu_li .bg {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}

.nav .menu .menu_li:hover .bg {display:block; background:#ff0000;}</p>

<p></style></p>

<p> </p>

<p><div class="nav">

    <div class="menu">

        <ul>

            <li class="menu_li">

                <span>메뉴1</span>

                <div class="bg"></div>

            </li>

            <li class="menu_li">

                <span>메뉴2</span>

                <div class="bg"></div>

            </li>

            <li class="menu_li">

                <span>메뉴3</span>

                <div class="bg"></div>

            </li>

        </ul>

    </div>

</div></p>

<p> </p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

s
sinbi
5년 전
( ^ _________ ^ ) ===========b
테스트 해보니 잘 되네요.
https://codepen.io/sinbi/pen/qBdGbZB
D
DSLOVE
5년 전
네! 확인했습니다 ^_^ @sinbi 님 열정에 엄지척!ㅎㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

그

css로 상위를 찾아가는건 불가능한걸로알고있습니다.. > 부호로 자식은 내려가두요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
임진강
5년 전
혹시나 제가 모를뿐 있지 않을까 했는데 역시 없군요 ㅠ 알려주셔서 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

D
DSLOVE
5년 전

약간의 편법을 쓰면 됩니다.

menu 클래스 안에

예)ov 클래스를 하나 더 생성하시고,

menu hover 시에 ov 가 display:block 되고,

position:absolute 이용해서 nav 위치로 이동시키고 

background 로 덮으면 됩니다. z-index 로 우선순위 잡아주시구요! 

이해되셨을까요? ^^

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

�
임진강
5년 전
아하 그런 방법도 있군요! 여러경우에 쓸 수 있는 방법이네요 ㅎㅎ 좋은 답변 감사합니다!
s
sinbi
5년 전
( ^ _________ ^ ) ==b
s
sinbi
5년 전
막상 구현해보려니....여간 어려운 게 아니네요.
https://codepen.io/sinbi/pen/vYOwOda ㅡㅡ;
ps.
부모 자식간엔 z-index 안 먹히는 것 같아요.
D
DSLOVE
5년 전
앗!! sinbi님~ 하던일만 마무리되면 저도 해볼께요! ㅠㅠ
D
DSLOVE
5년 전
@sinbi
지금 한번 해봤습니다!
메뉴명을 감싼 후에 우선순위를 주었어야했는데,
위에 답은 제가 좀 성급했네요 ㅠㅠ

<style>
.nav {position:relative;}
.nav .menu {background:#000;}
.nav .menu ul:after {content:''; display:block; clear:both;}
.nav .menu .menu_li {float:left; width:200px; height:50px; line-height: 50px; text-align:center;}
.nav .menu .menu_li span {position:relative; z-index:3; color:#fff;}
.nav .menu .menu_li .bg {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
.nav .menu .menu_li:hover .bg {display:block; background:#ff0000;}
</style>


<div class="nav">
<div class="menu">
<ul>
<li class="menu_li">
<span>메뉴1</span>
<div class="bg"></div>
</li>
<li class="menu_li">
<span>메뉴2</span>
<div class="bg"></div>
</li>
<li class="menu_li">
<span>메뉴3</span>
<div class="bg"></div>
</li>
</ul>
</div>
</div>

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인