CSS 마우스 오버시 효과주기 (:hover)

CSS :hover 가상 클래스를 사용하여 마우스를 올렸을 때 스타일을 변경하는 방법입니다.

기본 문법

.parent-class .target-class:hover {
    /* 호버 시 적용할 스타일 */
}

기본 예시

/* 버튼 호버 */
.btn:hover {
    background-color: #0056b3;
    color: white;
}

/* 링크 호버 */
a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* 이미지 호버 */
img:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

트랜지션 효과 추가

/* 부드러운 전환 효과 */
.card {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}

부모 호버시 자식 요소 변경

/* 부모에 마우스 올리면 자식 스타일 변경 */
.parent:hover .child {
    display: block;
    opacity: 1;
}

/* 드롭다운 메뉴 */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* 썸네일 오버레이 */
.thumbnail:hover .overlay {
    opacity: 1;
}

다양한 호버 효과

/* 색상 변경 */
.item:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* 테두리 효과 */
.box:hover {
    border-color: #007bff;
    border-width: 2px;
}

/* 그림자 효과 */
.card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 크기 변경 */
.icon:hover {
    transform: scale(1.2);
}

/* 회전 효과 */
.rotate:hover {
    transform: rotate(360deg);
}

버튼 스타일 완성 예시

.btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

관련 가상 클래스

:hover마우스 올렸을 때
:active클릭하는 순간
:focus포커스 받았을 때
:visited방문한 링크