요소 이동 없이 호버에 CSS 테두리를 추가하는 방법은 무엇입니까?

요소 이동 없이 호버에 CSS 테두리 추가

호버 효과의 요소에 강조 표시된 배경을 적용할 때 CSS 테두리를 추가하면 다음이 발생할 수 있습니다. 예상치 못한 결과로. 1px 테두리가 추가되면 요소가 넓어져 위치가 이동하게 됩니다. 배경 이미지 접근 방식을 사용하지 않고 어떻게 이를 처리할 수 있습니까?

해결책은 시작하는 요소에 투명한 테두리를 만드는 것입니다.

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

이렇게 하면 테두리가 존재하지만 보이지 않게 유지되어 움직임이 발생하지 않도록 합니다. 호버 효과 적용 시:

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

강조 표시된 배경은 색상 테두리와 함께 적용되지만 테두리는 이미 투명하므로 요소의 크기를 변경하지 않습니다. 결과적으로 요소의 위치는 마우스를 올려도 일관되게 유지됩니다.

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