我有一行,我正在应用背景高亮悬停。
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
}
然而,当边界给元素增加1px时,它就会“移动”。我该如何补偿上面的移动(不使用背景图像)?
我有一行,我正在应用背景高亮悬停。
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
}
然而,当边界给元素增加1px时,它就会“移动”。我该如何补偿上面的移动(不使用背景图像)?
你可以使边界透明。以这种方式存在,但它是无形的,所以它不会推动任何东西:
.jobs .item { 背景:# eee; 边框:1px实体透明; } .jobs .item:hover { 背景:# e1e1e1; 边框:1px solid #d0d0d0; } < div class = "工作" > < div class = "项目" >项目< / div > < / div >
对于已经有边框的元素,并且你不希望它们移动,你可以使用负边距:
.jobs .item { 背景:# eee; 边框:1px solid #d0d0d0; } .jobs .item:hover { 背景:# e1e1e1; 边框:3px solid #d0d0d0; 保证金:2 px; } < div class = "工作" > < div class = "项目" >项目< / div > < / div >
向现有边界添加宽度的另一个可能的技巧是添加一个带有所需像素宽度的扩展属性的盒影。
.jobs .item { 背景:# eee; 边框:1px solid #d0d0d0; } .jobs .item:hover { 背景:# e1e1e1; Box-shadow: 0 0 0 2px #d0d0d0; } < div class = "工作" > < div class = "项目" >项目< / div > < / div >
试试这个,也许能解决你的问题。
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/