css :hover 의사클래스

:hover 의사클래스

:hover 유저가 마우스 커서를 사용해 상호작용 중인 요소를 선택하여,
유저의의 마우스 커서가 요소 위에 올라가 있으면 선택이된다.

• 예제로 알아보기
  

    🖥 메인박스에 마우스커서를 가져가면 '메인박스입니다'메시지가 나타나게 하기
    메인박스는 가로세로 200px 배경색은 red 텍스트색은 흰색
    
     [html]
       <div class="mainBox">
        <span>메인박스입니다</span>
      </div>
      
     [css]
     .mainBox {
        width: 200px;
     	height: 200px;
	background-image: red;
	opacity: 0;
   	}
      span {
        color: white;
        }
      .mainBox:hover span{
        opacity: 1; //투명도(opacity값이 1이면 불투명, 
                      0에 가까워 질수록 투명해지며 0이 되면 완전히 투명해진다)
        }
   👩🏻‍🏫 즉, mailBox클래스에 마우스 커서를 가져가면 span의 opcity의값이
      1이 되어 불투명하게 되므로, 글씨가 나타나게 된다.

• 의사 클래스에 대해서 더 알아보기
  [ 가상클래스, Pseudo-classes ]
  선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.
  
  여러가지 의사 클래스
  +:visited 탐색기 히스토리
  +:checked 콘텐츠의 상태

<참조사이트> https://developer.mozilla.org/ko/docs/Web/CSS/:hover