[CSS] 마우스 커서 올리면 효과주기 : hover

hover

CSS의 :hover 선택자를 사용해서 마우스를 요소 위에 올렸을 때 적용되는 스타일을 정의한다,

:hover는 링크, 버튼, 이미지 등 다양한 요소에 사용할 수 있다

.col {
        border: 2px solid rgb(72, 94, 72);
        border-radius: 10px;
        padding: 10px 10px 10px 10px;
        margin: 10px 50px 10px 50px; 
        background-color: white;
}

.col:hover {
        border: 2px solid rgb(72, 94, 72);
        border-radius: 10px;
        padding: 10px 10px 10px 10px;
        margin: 10px 50px 10px 50px; 
        background-color: white;
            
        box-shadow:3px 3px 3px 3px #999;

}

 

차이가 별로 없긴하지만 마우스를 가져다댔을때 그림자가 생기는 것을 볼 수 있다!