인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
메뉴에 hover 했을 때 밑줄효과 유지하는 방법이요!
작성
·
2.4K
1
네비게이션바 연습중입니다.
메인 메뉴에 hover했을 때 밑줄 나오게하는 거 까지 했어요.
서브메뉴가 펼쳐져있는 상태에서 밑줄이 고정됐으면 좋겠는데
어떻게 해야할지를 모르겠어요.
<div class="gnb-outer">
<nav>
<ul class="gnb">
<li>
<a href="#none"></a>
<div class="dropdown">
<a href="#none"></a>
<a href="#none"></a>
</div>
</li>
<li>
<a href="#none"></a>
</li>
<li>
<a href="#none"></a>
</li>
<li>
<a href="#none"></a>
</li>
<li>
<a href="#none"></a>
<div class="dropdown">
<a href="#none">Q&A</a>
<a href="#none">FAQ</a>
</div>
</li>
<li>
<a href="#none"></a>
<div class="dropdown">
<a href="#none"></a>
<a href="#none"></a>
<a href="#none"></a>
<a href="#none"></a>
<a href="#none"></a>
</div>
</li>
</ul>
</nav>
</div>.gnb li > a::after {
content: " ";
display: block;
margin-top: 5px;
width: 100%;
border-bottom: 3px solid #146ebc;
transform: scaleX(0);
transition: 0.8s;
}
.gnb li > a:hover::after{
transform: scaleX(1);.gnb li > a::after {
content: " ";
display: block;
margin-top: 5px;
width: 100%;
border-bottom: 3px solid #146ebc;
transform: scaleX(0);
transition: 0.8s;
}
.gnb li > a:hover::after{
transform: scaleX(1);
코드는 이렇게 짠 상태입니다.
답변 1
0
코딩웍스(Coding Works)
지식공유자
현재의 예제는 해당 강의와 직접적인 관계가 있는 예제는 아닌 듯 합니다.
다음에는 해당 웹디자인 기능사 실기시험 강의 예제에 관련된 질문으로 부탁드립니다.
일단 올리신 예제에서 단순히 :hover로 해결되지 않습니다.
:hover 되었을 때 어떤 요소를 좌표로 이동 시켜야 호버를 유지시킬 수 있습니다.
예제를 만들 수는 없어서 개략적인 개념 정도만 이해해주세요.
<div class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<span class="hover-underbar"></span>
</div>
.menu가 부모요소고 .hover-underbar가 자식요로로 absolute 됩니다.
그리고 .menu li:nth-child(1):hover 되면 좌표를 top: 0; left: 0 그리고 .menu li:nth-child(2):hover 되면 좌표를 top: 50px; left: 0
이런식으로 해주면 .hover-underbar가 마우스 위치에 따라서 이동하는 사용작용을 만들 수 있습니다.
감사합니다..! 다음부턴 관련있는 예제만 들고오겠습니다.