:active
사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경
:hover
마우스가 해당 요소 위에 있을 때
:focus
사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있습니다. 클릭 이외에도 탭 키를 이용해서 요소를 선택해도 활성화됩니다.
<body>
<div class="one"></div>
<input type="text" class="box" placeholder="click here!">
<button class="btn">click me!!</button>
</body><style>
.one{
background: violet;
width: 100px;
height: 100px;
transition: all 2s;
}
.one:hover {
background: crimson;
width: 200px;
height: 200px;
}
.btn {
border: 4px solid yellowgreen;
border-radius: 4px;
padding: 30px 60px;
background: none;
color: yellowgreen;
font-size: 32px;
transition: all 0.3s;
/* position: relative; */
}
.btn:active {
color: white;
background-color: purple;
}
.box {
transition: all 0.5s;
width: 100px;
}
.box:focus {
background: rosybrown;
color: white;
}
.box:hover {
width: 200px;
}
</style>여기 .one의 transition: all 2s;과 .btn의 transition: all 0.3s; 처럼 추가하면 즉시 변경이 아니라 애니메이션 효과처럼 박스의 크기와 색깔이 시간을 두고 천천히 바뀌는 효과를 준다. 이것은 가상요소(:)가 아닌 원본 요소에게 준다.
결과
얼레벌레 돌아가는 Frontend Developer