CSS 부모 자식 관련 질문드립니다.
본문
<div class="nav" >
<div class="menu"></div>
</div>
위와 같은 html 구조를 가질경우 menu:hover의 경우 상위요소인 nav의 background를 바꾸려고 합니다.
jquery를 사용하지 않고 css 만으로 어떻게 짜야 하나요?
답변 4
걍 동일하게 하시면 될 듯...
다만, 사이가 margin으로 벌어긴 구간에 허버 시엔 작동 안 하니, js 이용하셔야 할 듯...
흠 .nav는 임시로 nav로 주긴 했지만 그 안에 다른 여러가지가 들어가서 .menu는 nav안의 일부라서 nav에 :hover를 주기엔 무리가 있네요 ㅠ js밖에 안된다면 그렇게 해야겠네요 ㅠ
약간의 편법을 쓰면 됩니다.
menu 클래스 안에
예)ov 클래스를 하나 더 생성하시고,
menu hover 시에 ov 가 display:block 되고,
position:absolute 이용해서 nav 위치로 이동시키고
background 로 덮으면 됩니다. z-index 로 우선순위 잡아주시구요!
이해되셨을까요? ^^
아하 그런 방법도 있군요! 여러경우에 쓸 수 있는 방법이네요 ㅎㅎ 좋은 답변 감사합니다!
( ^ _________ ^ ) ==b
막상 구현해보려니....여간 어려운 게 아니네요.
https://codepen.io/sinbi/pen/vYOwOda ㅡㅡ;
ps.
부모 자식간엔 z-index 안 먹히는 것 같아요.
앗!! sinbi님~ 하던일만 마무리되면 저도 해볼께요! ㅠㅠ
@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>
css로 상위를 찾아가는건 불가능한걸로알고있습니다.. > 부호로 자식은 내려가두요
혹시나 제가 모를뿐 있지 않을까 했는데 역시 없군요 ㅠ 알려주셔서 감사합니다!
댓글로는 SyntaxHighlight 적용이 안되서,
답글로 한번 더 남겨드려봅니다 ㅎㅎ 이렇게 한번 해보세요!
<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>
( ^ _________ ^ ) ===========b
테스트 해보니 잘 되네요.
https://codepen.io/sinbi/pen/qBdGbZB
네! 확인했습니다 ^_^ @sinbi 님 열정에 엄지척!ㅎㅎㅎ
