CSS :hover 효과 (JS MDN)

손종일·2020년 7월 17일
0

HTML/CSS

목록 보기
4/8
post-thumbnail

JS MDN

이전에 토요일만 수강하는 학원에서는 JS MDN을 사용하여 하기처럼 Mouse가 해당 이미지나 로고 등 선택한것에 mouserenter 했을때 색상을 변환하고 mouseleave 했을때 원래대로 돌아오도록 구현했었다. 하지만 아래에서 설명한것처럼 css의 hover를 통하여 단 두줄만에 아래의 효과를 구현할 수 있었다. Velog를 첫 글을 올리면서 MDN 에 대한 것을 다시 찾아볼 수 있었다.

function init() {
title.addEventListener("mouseenter", handleClick);
title.addEventListener("mouseleave", handleClick);
}

CSS :hover

기본 효과는 회색이지만 마우스를 해당 아이콘에 올리게 되면 흰색으로 변한다.

.icon-a {
color: gray;
}
.icon-a:hover {
color: white;
}

profile
Allday

0개의 댓글