[CSS] 롤오버(hover)란? | hover 사용법

🐤 study/HTML | CSS

[CSS] 롤오버(hover)란? | hover 사용법 | hover 예제

budtree 2022. 6. 20. 22:39

🔥 CSS

[실습 1] 롤오버(hover) 사용하기

hover란?

: 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 전환되는 css 요소

사용법

: 이벤트를 적용하고 싶은 위치에 :hover 선언

예시)

div:hover {
	background-color : pink;
}

<!-- hober.html -->
<!-- 노란 화면에 마우스를 갖다대면 3개의 box가 출력되는 화면 -->

<head>
    <link rel="stylesheet" href="hober.css"/>
</head>
<section></section>
<div>박</div>
<div>다</div>
<div>안녕?</div>
<div>정</div>

/* hober.css */

section,
div {
  width: 150px;
  height: 150px;
  margin: 20px;
  background-color: yellow;
  font-size: 2rem;
  color: white;
  text-align: center;
}

div {
  background-color: pink;
  display: none;
}

<!-- hover 사용하기 -->
section:hover ~ div:not(:nth-of-type(3)) {
/*  가로로 출력  */
  display: inline-block;
/*  세로로 출력  */
  /* display : block; */
}