호버 트리거 CSS 테두리를 추가할 때 요소 이동을 방지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

호버 트리거 CSS 테두리를 추가할 때 요소 이동을 방지하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-17 20:17:10

원래의

864명이 탐색했습니다.

How to Prevent Element Shift When Adding Hover-Triggered CSS Borders?

호버로 인해 발생하는 CSS 테두리로 요소 이동 방지

마우스를 올리면 행에 배경 강조 표시를 추가하지만 원치 않는 강조 표시가 나타납니다. 추가 1px 테두리로 인한 움직임. 배경 이미지를 사용하지 않고 이러한 변위를 어떻게 보상합니까?

해결책:

요소가 이동하는 것을 방지하려면 테두리를 투명하게 만들 수 있습니다. 이렇게 하면 테두리가 존재하지만 보이지 않게 되어 요소에 대한 잠재적인 밀림이 제거됩니다.

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

로그인 후 복사

이 수정을 통해 요소의 위치를 방해하지 않고 호버 효과가 의도한 동작을 유지할 수 있습니다.

위 내용은 호버 트리거 CSS 테두리를 추가할 때 요소 이동을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!