在悬停时添加CSS边框而不移动元素
在悬停时添加CSS边框而不移动元素
提问于 2012-03-08 12:09:13
我有一个行，我正在悬停时应用背景高亮显示。
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
}然而，当边框将1px 额外的添加到元素时，它会使元素“移动”。我如何在这里补偿上面的移动(不使用背景图像)？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-03-08 12:12:32
您可以使边框透明。这样它就存在了，但它是看不见的，所以它不会推动任何东西：
.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>
Stack Overflow用户
发布于 2012-03-08 12:12:52
添加margin:-1px;可以减少每一端的1px。或者，如果你只需要边框，你可以做margin-left:-1px等。
Stack Overflow用户
发布于 2012-03-08 12:19:05
试试这个，也许能解决你的问题。
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9612758
复制相关文章
相似问题