hover 적용안됨...
본문
고객센터라는 곳에 마우스를 갖다 대면 div가 나오게 하고 싶은데 나오질 않습니다...
<div className="nav-bar-top-login">
<a className="nav-bar-top-login-member">회원가입</a>
<div className="nav-bar-top-login-icon">
<RxDividerVertical />
</div>
<a>로그인</a>
<div className="nav-bar-top-login-icon">
<RxDividerVertical />
</div>
<a className="nav-bar-top-login-center">
고객센터
<TiArrowSortedDown />
</a>
<div className="nav-bar-top-login-member-menu">
<div>공지사항</div>
<div>자주하는 질문</div>
<div>1 : 1 문의</div>
<div>대량주문 문의</div>
</div>
</div>
.nav-bar-top-login-member-menu {
width: 120px;
height: 105px;
border: 1px solid rgb(221, 221, 221);
font-size: 12px;
float: right;
background-color: white;
display: none;
}
.nav-bar-top-login-center:hover .nav-bar-top-login-member-menu {
display: block;
}
답변 2
.nav-bar-top-login-member-menu 가 .nav-bar-top-login-center 내부에 있지 않으니 저 소스는 먹히지 않습니다.
.nav-bar-top-login-center:hover+.nav-bar-top-login-member-menu 이렇게 해보셔야 할듯합니다.
알려주셔서 감사합니다 ㅠㅠㅠㅠ
1. className > class
2. .nav-bar-top-login-center 와 .nav-bar-top-login-member-menu 는 동일 노드이므로
.nav-bar-top-login-center:hover + .nav-bar-top-login-member-menu
와 같은 선택자를 사용하거나
.nav-bar-top-login-center:hover .nav-bar-top-login-member-menu
처럼 사용하려면 .nav-bar-top-login-member-menu 을 .nav-bar-top-login-center 하위에 위치시켜야 함
감사합니다 ㅠㅠㅠㅠ
