2021-04-20
:hover 선택자는 유저의 커서(마우스 포인터)가 요소 해당 선택자 위에 올라가 있으면 선택됩니다.
- 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#hoverBtn:hover{ /*아이디 선택자 뒤에 :hover를 추가작성 */
background-color: tomato;
}
</style>
</head>
<body>
<button type="button" id="hoverBtn">Hello world</button>
</body>
</html>
예제 코드는 일반적인 버튼을 만들어 둔뒤 :hover로 추가 정의를 해주었다. 이후 결과를 확인하면 해당 버튼에 마우스 커서가 없을시에는 일반적인 버튼이었다가 마우스커서를 해당 버튼에 위치시키면 css로 부여해준 배경색 속성이 부여되게 된다.
메인 이미지 출처: Photo by Jakob Owens on Unsplash