요소를 이동하지 않고 호버에 CSS 테두리 추가

요소를 이동하지 않고 호버에 CSS 테두리 추가

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS 호버 테두리는 요소를 약간 조정합니다. (14개 답변)

마감됨3년 전에.

커서 위에 배경 강조 표시를 적용하는 행이 있습니다.

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

그러나 테두리가 요소에 1px 추가됨에 따라 요소가 '이동'됩니다.배경 이미지를 사용하지 않고 여기서 위의 움직임을 어떻게 보정해야 합니까?

테두리를 투명하게 만들 수 있습니다.이런 식으로 존재하지만 보이지 않기 때문에 아무것도 밀어내지 않습니다.

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

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

<div class="jobs">
  <div class="item">Item</div>
</div>

이미 테두리가 있고 이동하지 않으려는 요소의 경우 음의 여백을 사용할 수 있습니다.

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

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

기존 테두리에 너비를 추가할 수 있는 또 다른 방법은 다음과 같습니다.box-shadow원하는 픽셀 폭의 확산 속성을 사용합니다.

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

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

더하다margin:-1px;그것은 감소합니다.1px양쪽에아니면 측면만 필요하다면 할 수 있습니다.margin-left:-1px기타.

이것을 시도해 보세요. 그것은 당신의 문제를 해결할 수도 있습니다.

CSS:

.item{padding-top:1px;}

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

HTML:

<div class="jobs">
    <div class="item">
        content goes here
    </div>
</div>

출력은 fiddle 참조: http://jsfiddle.net/dLDNA/

추가 aborder일반 품목에 동일.color처럼background보이지 않게 말입니다.그런 식으로 항목은border: 1px그것이 호버되든 아니든 간에.

언급URL : https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element