我有一行,我正在应用背景高亮悬停。

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

然而,当边界给元素增加1px时,它就会“移动”。我该如何补偿上面的移动(不使用背景图像)?


为常规项目添加边框,颜色与背景相同,这样它就看不见了。这样,无论是否悬停,项目都有一个边框: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 >


增加保证金:1 px;每边减少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/