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

가상 클래스 선택자(Pseudo-Classes Selectors)

• hover, active, focus

• ‘:’ 가 선택자 기호

 

 

HOVER

• E(기본선택자) 에 마우스(포인터)가 올라가 있는 동안에만 E 선택

a:hover {
    font-weight : bold;
    font-size : 20px;
}
.box {
    width : 100px;
    height : 100px;
    background : tomato;
    transition : 0.4s;
}
.box:hover {
    width : 200px;
}

<a href=“https://google.com”>Google!</a>
<div class=“box”></div>

 

ACTIVCE

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

.box {
    width : 100px;
    height : 100px;
    background : tomato;
    transition : 0.4s;
}
.box:activce {
    width: 200px;
    background: yellow green;
}

<div class=“box”></div>

 

FOCUS

• E 가 포커스 된 동안에만 E 선택

• 대화형 컨텐츠에서 사용 가능(input, img, tabindex 등)

input {
    width : 100px;
    outline : none;                   <!— 테두리, border 보다 사용하기 까다로움 —>
    border : 1px solid lightgray;
    padding : 5px 10px;
    transition : 0.4s;
}
input:focus {
    border-color : red;
    width : 200px;
}

<input type=“text”>

 

 

 

출처 : heropy.org