[퍼블] hover(호버) 및 transition(트랜지션)

hover 란?

- 호버는 마우스를 해당 태그에 위치시켰을 때 디자인이 변경되는 것을 말합니다.

transition란?

- 트랜지션이란 호버로 인하여 디자인이 변경될때 지정되는 시간을 말합니다

<a href="#none">테스트</a>

 

 

a {
    font-size: 30px;
    transition: 0.5s;
}

a:hover{
    color: black;
    text-decoration: none;
}

a 태그

윗 태그로 html 결과물을 보았을때 이런 식으로 출력됩니다.

마우스를 태그 위로 위치시켰을 경우

하지만 마우스를 태그 위로 위치시켰을 경우 글자 색이 검은색으로 변경되고 밑줄이 없어진 것을 확인할 수 있습니다. 이는 CSS에서 a:hover 옵션값을 주었기 때문이고 a 테그에 보면 transition을 0.5초로 줬기 때문에 해당 시간만에 변경된 것을 확인 할수 있습니다.