마우스 hover 요소 밀림 현상
⚠️ 메뉴에서 기본 상태에 border를 주지 않았는데 마우스 hover 시에 border를 넣게 되면 테두리 크기만큼 주변 요소가 밀리게 된다.
⚒️ solution
이경우 hover가 아닌 기본 상태에 hover 했을 때와 같은 값의 테두리 크기를 넣어줘야 한다.
테두리 색상 값 자리에 transparent로 투명하게 만들어 준다. 그러면 border가 있는 상태지만 사용자가 보는 화면에서는 완전히 숨겨준다.
그리고 마우스 hover를 했을 때 더이상 요소 밀림 현상은 생기지 않는다.
'기술 > CSS' 카테고리의 다른 글
| [CSS] CSS 변수 (2) | 2023.11.27 |
|---|---|
| [CSS] 이미지스프라이트 기법 - 가상요소 사용 (0) | 2023.11.27 |
| [CSS] height: % vs vh 의 차이 (0) | 2023.10.24 |
| [CSS] Flex - Margin Auto (0) | 2023.10.24 |
| [CSS] transform- transition🥇 vs margin (0) | 2023.10.16 |