새소식
반응형
WEB/CSS
[CSS] CSS 선택자 :hover 에 대하여 알아보기
- -
반응형
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
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS box-shadow에 대하여 알아보도록 하자. (0) | 2021.04.24 |
|---|---|
| [CSS] CSS box-sizing에 대하여 알아보도록 하자. (0) | 2021.04.21 |
| [CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after (0) | 2021.04.16 |
| [CSS] CSS Attribute Selectors(속성 선택자) 알아보기 (0) | 2021.03.28 |
| [CSS] CSS padding을 통한 내부 여백 부여하기 (0) | 2021.03.27 |
Contents
소중한 공감 감사합니다