[CSS] hover, transition

Narcoker·2023년 5월 25일
0

CSS

목록 보기
20/40

a {
	color: #333;
    text-decoration: none;
    width: 120px
    text-align: center;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    transition: 0.5s;
}

a:hover {
	background-color: #000;
    color: white;
}

transition은 애니메이션 적용까지 걸리는 시간을 의미한다.
반드시 본 클래스 스타일에 지정해줘야한다.

가상 클래스 hover는 클래스 옆에 콜론을 붙이고 명시한다.
클래스명과 콜론과 가상클래스 사이에 공백을 사용해서는 안된다.

마우스가 올라갔을 때 적용되는 스타일이다.

profile
열정, 끈기, 집념의 Frontend Developer

0개의 댓글