호버 hover
마우스를 올린 상태를 의미한다.
마우스 오버, 호버라고 불린다.
결과물
캡쳐한 사진으로 보면 별로 달라진 것이 느껴지지 않지만
애니메이션 효과처럼 자연스럽게 색 변화가 이뤄진다.
html 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../1__mousehover/styletest.css">
</head>
<body>
<button>확인</button>
</body>
</html>사실 마우스 호버는 html 보다는 CSS에 더 가깝다.
html에서는 구조가 될 틀만 입력하면 되는 것이므로
<body> 태그 안에 버튼만 하나 넣어준다.
CSS 코드
button {
width: 120px;
height: 40px;
background-color: #004fff;
color: white;
box-shadow: 0 4px 16px rgba(0, 79, 255, 0.3);
font-size: 16px;
font-weight: bold;
border-radius: 20px;
border: none;
transition: 0.3s;
}
button:focus{
outline: 0;
}
button:hover{
background-color: rgba(0, 79, 255, 0.9);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 79, 255, 0.9);
}button { }
button에 대한 기본적인 CSS를 지정해준다. (크기, 배경색, 글자색, 그림자 등)
button : focus { }
버튼이 선택 되었을 때, 기본적으로 아웃라인을 제공해주고 있는데
그 효과를 원하지 않으니 해제하기 위해서 아웃라인을 0으로 만들어주었다.
button : hover { }
호버 상태일 때 변화할 CSS를 지정해준다.
이 예제에서는 버튼의 색과 그림자, 마우스 포인터의 모양을 변경해주었다.
출처