마우스 호버링 시 요소 표시 방법

마우스 호버링 시 요소 표시법 배우기

나를 호버시키세요.
위의 div에 마우스를 호버시키면 나타나게 됩니다.

마우스 호버링 시 요소 표시 방법

첫 번째 단계 - HTML 추가:

<div class="myDIV">나를 호버시키세요.</div>
<div class="hide">위의 div에 마우스를 호버시키면 나타나게 됩니다.</div>

두 번째 단계 - CSS 추가:

.hide {
  display: none;
}
.myDIV:hover + .hide {
  display: block;
  color: red;
}

본인이 직접 테스트해보세요

예제 설명:

좌석同级 선택자 (+를 선택합니다.

“相邻”이라는 단어는 “그 뒤에 오는”이라는 의미이며, 위의 예제는 모든 class=".hide" 의 요소, 이 요소들은 호버링할 때마다 그 뒤에 배치되는 class=".myDIV" 의 요소 이후.

관련 페이지

강의:CSS 컴보이너