Question

当悬停li元素时，我想在底部和顶部添加边框。代码看起来像这样：

#overview li:hover {
    background: rgb(31, 31, 31);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

http://jsfiddle.net/rwDYR/（将鼠标悬停在左侧导航栏中）

问题是，它将li元素移动1或2个像素。我已经尝试为悬停状态添加margin-top: -1px，但这并没有解决问题。

有什么想法吗？

Answer 1

在您不悬停<li>时添加透明边框（并仅更改:hover上边框的颜色）

#overview li {
   padding: 5px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
}

#overview li:hover {
   border-color: #fff;
   /* other style ... */
}

（在你的小提琴上即时测试，似乎它工作正常）

Answer 2

那是因为你在悬停它时为li添加了边框。有各种解决方案。一种是将填充减少1个像素以补偿增加的边界。

http://jsfiddle.net/rwDYR/1/

Answer 3

我建议尝试从头开始添加1px上边距，并在悬停时将上边距设置为0，以便补偿1px上边框。您也可以通过更改填充（而不是边距）

来完成

Answer 4

取决于浏览器支持的级别，您可以使用css box-sizing属性

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

#overview li {
    box-sizing: border-box;
}

Answer 5

更新 http://jsfiddle.net/rwDYR/5/

或使用相同的背景颜色作为边框

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}

将具有border属性的元素悬停移动

5 个答案: