css 질문 입니다.
본문
#top_gnb li.over { display:inline-block;margin:0;padding:0;line-height:45px;}
#top_gnb li.over a { display:inline-block;color:#fff;padding:0 30px;font-size:14px;text-align:center; }
#top_gnb li.over a:hover { color:#fbc404; text-decoration:none}
#top_gnb ul.sub { display:none; }
#top_gnb ul li.over:hover > ul.sub { display:block; position:absolute; top:45px; width:120px; background:#10465f; padding:5px 5px;}
#top_gnb ul.sub > li { line-height:22px; padding:0; margin:0; }
#top_gnb ul.sub > li a { width:120px; text-align:left; color:#fff; font-size:13px; padding:4px; margin:0;}
#top_gnb ul.sub > li a:hover { width:112px; padding:4px; margin:0; background:#17698f; }
<li class="over">
<a href="#">그때그시절</a>
<ul class="sub">
<li><a href="">서브메뉴01</a></li>
<li><a href="">서브메뉴02</a></li>
<li><a href="">서브메뉴03</a></li>
</ul>
</li>
예를들어 "그때그시절" 1차메뉴에 오버시 하위메뉴가 출력이 되는데요
하위메뉴 영역에 들어서면 "그때그시절" 메뉴의 롤오버 상태가 해제가 되어서 오버컬러 노란색이 풀리는데요
유지 하게끔 할려면 어떻게 수정해야 될까요.
서브메뉴 영역에 마우스 오버시에도 1차메뉴는 롤오버 컬러 유지 입니다.
답변 2
#top_gnb li.over a:hover { color:#fbc404; text-decoration:none}
>>
#top_gnb li.over:hover { color:#fbc404; text-decoration:none}
a:hover라서 a를 벗어나면 다시 돌아가는거에요.
a의 위인 li.over:hover를하면 아래 ul.sub로가도 il.over에 올라가 있기 때문에 색이 유지되실꺼에요.
네 안그래도 css 로도 해보고 제이쿼리로도 해보는 중입니다.
머..어디꺼 베끼면 바로 하겠지만 공부하는 마음으로 이해해서 제걸로 만들어볼려고 이렇게 저렇게 하면서
질문을 올리는 중입니다.. 한번 해볼게요.
네 말씀대로 하면 되긴 하는데 링크가 걸리기때문에 a:hover 로 오버효과는 줘야 되서요
스크립트도 올려주세여
css 오버로 작동해서 따로 스크립트 없어요~
오버시 클래스 추가해서 유지 될수 잇도록 하면 될듯 합니다.
#top_gnb li.over a:hover { color:#fbc404; text-decoration:none}
이렇게 추가를 했습니다.
#top_gnb .over2 { color:#fbc404; text-decoration:none}
$("ul.sub").hover(function(){
$(this).parent().toggleClass("over2");
});
<li class="over">
<a href="#">그때그시절</a>
<ul class="sub">
<li><a href="">서브메뉴01</a></li>
<li><a href="">서브메뉴02</a></li>
<li><a href="">서브메뉴03</a></li>
</ul>
</li>
ul.sub 서브메뉴에 오버시 부모 클래스에 .over2 이게 적용되라.. 인데..
어디가 잘못됐을까요.
