CSS HOVER 관련 질문드려요~
본문
a:hover 를 이용하여
드롭다운 메뉴를 구상중인데요
<style>
.menu_over { display: block; }
.sub_over { display: none; z-index:1; }
.menu_over:hover .ad_sub_over { display: block; }
#txt1 { color:#ffffff; font-size:30px; }
</style>
<div class="menu_over">
<span id="txt1">메뉴A</span>
<div class="sub_over">
<span id="txt1">하위메뉴A</span>
</div>
</div>
menu_over 란 이름의 개체에 마우스 오버시
sub_over 가 보이게 되는건데
혹시 오버시에 다른 이름의 스타일을 변경할수 없나요?
위 소스대로 적용하고 main_over 개체를 마우스 오버시에
text1 이라는 span 객체의 폰트색상을 다른색으로 변경하고 싶습니다.
JS 를 사용하지 않고 단순 CSS 로만 가능할까요?
답변 1
이미 질문소스에 답이 있네요
:hover 붙이면 됩니다.
#txt는 main_over 내부에 있으니 그대로 선언해주면 되겠습니다.
.main_over:hover #txt1 {color:#aaaaaa;}
이런식입니다.
다만, id는 한페이지에 하나만 존재해야 합니다. 위와 같은 경우에는 클래스를 사용하시는게 맞습니다.
아.. 클래스로 해결하면 되는군요. 감사합니다^^
답변을 작성하시기 전에 로그인 해주세요.
