초보 개발자의 성장 일기

메뉴 hover시 border-bottom넣을 때 글자 움직임 본문

Development/React JS

메뉴 hover시 border-bottom넣을 때 글자 움직임

YUNA 2024. 1. 23. 21:10 
export const Navigation = styled.ul`
  display: flex;
  gap: 20px;

  li {
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    border-bottom: 1px solid ${(props) => props.theme.color.white};

    &:hover {
      border-bottom: 1px solid ${(props) => props.theme.color.gray};
    }
  }
`;

 

메뉴에 hover했을 때 아래에 밑줄이 가도록 border-bottom 속성을 넣어주었으나

미세하게 글씨가 움직인다.

export const Navigation = styled.ul`
  display: flex;
  gap: 20px;

  li {
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    border-bottom: 1px solid ${(props) => props.theme.color.white};

    &:hover {
      border-bottom: 1px solid ${(props) => props.theme.color.gray};
    }
  }
`;

 

이걸 어떻게 해결하면 좋을지 생각하다가 hover전에도 border-bottom을 넣고,

배경색과 같게 해서 숨기는건 어떨까 해서 구현해봤다.

 

 

 

 

 

성공적으로 구현이 되었다!

저작자표시

'Development > React JS' 카테고리의 다른 글

[React] 자식한테 전달되는 target 막는법  (0) 2024.03.08
[React] 아이콘 사용시 라이브러리에서 SVG를 사용하게된 이유  (2) 2024.03.07
데이터 fetch 후 map을 하면 읽을 수 없는 이유  (0) 2024.01.10
로그인 입력폼이 유효하지 않을 때  (2) 2024.01.09
Hooks 규칙  (0) 2024.01.04
'Development/React JS' Related Articles more