이전 목록 다음
채택완료

CSS 부모 자식 관련 질문드립니다.

임임진강
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 09:49:50 3,977

<div class="nav" >

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

</div>

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

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

css html 부모 자식
|

답변 4개 / 댓글 9개

채택된 답변
+20 포인트
sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 09:54:47

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

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

답변에 대한 댓글 1개

임진강
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 09:58:35
흠 .nav는 임시로 nav로 주긴 했지만 그 안에 다른 여러가지가 들어가서 .menu는 nav안의 일부라서 nav에 :hover를 주기엔 무리가 있네요 ㅠ js밖에 안된다면 그렇게 해야겠네요 ㅠ
DDSLOVE
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 14:49:37

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

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

Copy 
<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>

답변에 대한 댓글 2개

sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 15:49:20
( ^ _________ ^ ) ===========b
테스트 해보니 잘 되네요.
https://codepen.io/sinbi/pen/qBdGbZB
DSLOVE
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 16:05:34
네! 확인했습니다 ^_^ @sinbi 님 열정에 엄지척!ㅎㅎㅎ
그그누보드초보이용자
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 10:25:19

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

답변에 대한 댓글 1개

임진강
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 10:31:38
혹시나 제가 모를뿐 있지 않을까 했는데 역시 없군요 ㅠ 알려주셔서 감사합니다!
DDSLOVE
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 10:14:33

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

menu 클래스 안에

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

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

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

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

이해되셨을까요? ^^

답변에 대한 댓글 5개

임진강
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 10:23:04
아하 그런 방법도 있군요! 여러경우에 쓸 수 있는 방법이네요 ㅎㅎ 좋은 답변 감사합니다!
sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 12:32:00
( ^ _________ ^ ) ==b
sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 13:13:36
막상 구현해보려니....여간 어려운 게 아니네요.
https://codepen.io/sinbi/pen/vYOwOda ㅡㅡ;
ps.
부모 자식간엔 z-index 안 먹히는 것 같아요.
DSLOVE
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 13:34:42
앗!! sinbi님~ 하던일만 마무리되면 저도 해볼께요! ㅠㅠ
DSLOVE
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-04-03 (금) 14:46:50
@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>

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