[CSS] :hover 시 transition 적용하기

 

전에는 div 여러 개 만들어서 카테고리를 구현 했었는 데

새로운 방식으로 구현 해보고 싶어서 ul, li 태그를 사용하였다.

 

아래와 같이 ul, li 태그로 카테고리에 들어갈 메뉴들을 적어주고 CSS 속성만 지정하면 간단하게 구현 할 수 있었다.

 

거기에 사용자가 li에 마우스를 올렸을 경우(:hover) 다른 색상을 보여주도록 UI를 수정하였고

더불어 transition을 사용하여서 스무스 하게 변할 수 있도록 했다!

 

transition 적용하는 방법은 아래 포스팅을 참고해도 좋고, 아래 코드를 참고해도 좋을 것 같다.

[생활코딩] transition

---

const Addition = styled.div`
  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & li {
    width: 75px;
    height: 64px;
    margin: 12px;
    padding: 10px;
    border: 0;
    float: left;
    background-color: orange;
    border-radius: 12px;

    transition: all 0.6s; // 마우스를 올렸을 경우 transition 설정
  }

  & li:hover {
    background-color: green;
    
    transition: all 0.6s; // 마우스를 내렸을 경우 transition 설정
  }
`;

---

li태그로 메뉴등을 가로로 배열하기 :: Outsider's Dev Story