[html] CSS 마우스 커서 올릴 때 효과주는 방법- Hover

오버(Hover)적용된 화면

📌 오버(Hover)적용 대상

1. exam6 (빨간색)에 마우스커서를 올렸을 때 box2의 color 변환
2. box1에 마우스커서를 올렸을 때 box1과 box2가 동시에 color와 size 변환

👉 Hover 작성방법

box1:hover {
  color: orange;
}

Hover는 사용자가 마우스 커서를 요소 위에 올라가 있을 때 적용된다.

.exam6 .box1:hover {   
  background-color : white;   
  width: 470px;  
  transition: 1s ease-out;
}  

: box1에 커서를 올렸을때 background color는 흰색으로 너비는 470px, 부드럽게 커지기
++ transition 속성은 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다.

.box1:hover .box2 {
  background-color : orange;   
  width: 600px;
}

: box1이 hover일때 box2도 같이 적용된다. background color는 오렌지로 너비는 600px

👉 not Hover 작성방법

.box1:not(:hover) ~ .box2 { 
  transition: 1s ease-out;
}  

: box1에 마우스 커서가 사라진 경우 box2가 천천히 줄어든다.