이전에 토요일만 수강하는 학원에서는 JS MDN을 사용하여 하기처럼 Mouse가 해당 이미지나 로고 등 선택한것에 mouserenter 했을때 색상을 변환하고 mouseleave 했을때 원래대로 돌아오도록 구현했었다. 하지만 아래에서 설명한것처럼 css의 hover를 통하여 단 두줄만에 아래의 효과를 구현할 수 있었다. Velog를 첫 글을 올리면서 MDN 에 대한 것을 다시 찾아볼 수 있었다.
function init() {
title.addEventListener("mouseenter", handleClick);
title.addEventListener("mouseleave", handleClick);
}
기본 효과는 회색이지만 마우스를 해당 아이콘에 올리게 되면 흰색으로 변한다.
.icon-a {
color: gray;
}
.icon-a:hover {
color: white;
}