我有一行在悬停时应用背景突出显示。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
