가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus

이 선택자들은 이벤트와 느낌이 많이 비슷하지만, 이벤트와 관련이 없다.

이 3가지 케이스는 특이한 경우이다.

 

 

1. Hover

마우스(포인터)가 올라가 있는 동안에만 선택

a:hover{
    font-weight : bold;
    font-size : 20px;
}

그럼 마우스가 a태그위에 있을 시에만 CSS기능이 작동이 된다.

 

 

 

2. Active

마우스로 클릭하는 동안에만 선택

a:active{
    font-weight : bold;
    font-size : 20px;
}

 

 

 

3. Focus

포커스 된 동안에만 선택

<input type="text">

input{
    width : 100px;
    outline : none;
    border : 1px solid orange;
    padding : 5px 10px;
    transition : 0.4s;
}

input:focus{
    border-color : red;
    width : 200px;
}

다음과 같이 대화형 컨텐츠에 많이 이용된다.