添加CSS边框悬停不移动元素

小开

在常规项中添加border，与background相同的color，这样它就不会被看到。这样，无论是否悬停，项目都有border: 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>

为现有边框添加宽度的另一个可能的技巧是添加带有所需像素宽度的spread属性的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>