가상 클래스 선택자란?

1, Hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 동작하는 것!

위의 이미지처럼 아무 박스를 하나 만들어 줬고

box.css라는 CSS 파일도 추가를 해줬습니다

.box {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 전환효과 */
  /* 1초 동안 화면을 전환 시킨다 */
  transition: 1s;
}
/* :hover 가 가상 클래스 선택자이다! */
/* 어떠한 행동을 했을 때 동작하는 개념 */
/* 그러나 주로 이러한 동작들은 자바스크립트에서 구현한다 */
/* 이 hover라는 것은 마우스를 올렸을 때 동작하는 것! */
.box:hover {
  width: 300px;
  background-color: royalblue;
}

이게 box.css의 내부 코드입니다

기본적으로 박스의 크기를 정해주고

backGround-color를 yellow로 선택했습니다

이후 transition을 통해 1초동안 화면을 전환하게끔 해주었습니다

이 때 하단의 코드를 보시면

hover를 사용하여 마우스 커서를 올렸을 때 어떤 이벤트를 줄 지 정해줬습니다

Untitled