css hover를 이용하면 마우스를 올렸을때 변화를 줄 수있습니다.

그리고 hover의 위치를 조금만 바꿔주면 색다른 결과를 만들 수 있습니다.

 .box2 {
 padding: 5px 5px; 
 background : #3A3A44;
 
}

 .box2:hover {
 background : #DE1838;
 }

기본적인 hover의 사용 예

box2에 hover를 설정하였기때문에 해당박스에 마우스가 올라가면 배경색이 빨갛게 변합니다.

-------------------------------------------------------------------------------------------------------

.box2 a {
 color: #FFC200;
}

box2 a:hover {
 color: #fff;
}

기본인적인 hover의 사용 예

a태그를 가진 콘텐츠에 대한 hover가 설정되었기때문에,

마우스를 콘텐츠에 올렸을시 글자색이 변합니다.

-------------------------------------------------------------------------------------------------------

.box2:hover a {
 color: #fff;
}

응용 hover의 사용 예

hover의 위치를 a보다 앞에 두었기때문에

박스에 마우스가 올라가면 a태그를 가진 콘텐츠의 색상이 변합니다.