w3.css
도구 설명
마우스를 올렸을 때 요소를 표시하는 방법을 알아보자.
호버 시 요소를 표시하는 방법
1단계) HTML 추가
<div class="myDIV">Hover over me.</div> <div class="hide">I am shown when someone hovers over the div above.</div>
2단계) CSS 추가
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
기본 예시
예제 보기인접한 형제 선택기(+)는 지정된 요소의 인접한 형제인 모든 요소를 선택한다.
“인접“이라는 단어는 ‘바로 다음’을 의미하며, 위의 예에서는 마우스오버 시 ‘.myDIV’가 있는 요소 바로 뒤에 배치되는 class=”.hide”가 있는 모든 요소를 선택한다.
참고
W3C School - How TO - Display an Element on Hover
공부 목적 블로그