JS' 공부흔적
[CSS] transition을 사용하여 커서를 올려놓았을 때 색상 서서히 변경하기 본문
웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다.
이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다.
간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다.
const Home = () => {
return (
<Btn>GET</Btn>
);
};
const Btn = styled.button`
all: unset;
margin-bottom: 20px;
border: 1px solid black;
border-radius: 8px;
padding: 8px 16px;
background-color: pink;
`;
이제 이 버튼에 커서를 올려놓았을 때 이벤트가 동작하도록 해야하므로 hover 이벤트를 추가해야한다.
SMALL
const Btn = styled.button`
all: unset;
margin-bottom: 20px;
border: 1px solid black;
border-radius: 8px;
padding: 8px 16px;
background-color: pink;
&:hover {
cursor: pointer;
background-color: beige;
transition: 0.5s all ease-in-out;
}
`;
커서를 올려놓았을 때 커서 모양, 배경색이 바뀌도록 했고, 이때 transition을 사용하여 0.5초에 걸쳐 바뀌도록 구현했다. 결과를 확인해보면 약간 이상하다. 커서에 올려놓을 때는 잘 작동하지만, 커서를 버튼 밖으로 이동시키면 바로 색이 바뀐다. 아래와 같이 말이다.
이를 해결하기 위해서는 hover 밖에도 transition을 똑같이 써주면 된다.
const Btn = styled.button`
all: unset;
margin-bottom: 20px;
border: 1px solid black;
border-radius: 8px;
padding: 8px 16px;
background-color: pink;
transition: 0.5s all ease-in-out;
&:hover {
cursor: pointer;
background-color: beige;
transition: 0.5s all ease-in-out;
}
`;
728x90
반응형