Question

我想在导航中的悬停项目的左侧和右侧添加边框。这是有效的，但看到我向元素添加2px它会推出其他元素。如何将边框添加到几乎位于悬停列表项的内部而不影响导航的其余部分？

 // Simple example:
 li {
     list-style: none;
     display: inline;
 }

 li a:hover {
     border-left: 1px solid black;
     border-right: 1px solid black;
 }

 // HTML:
 <ul>
     <li><a href="">Test 1</a></li>
     <li><a href="">Test 2</a></li>
     <li><a href="">Test 2</a></li>
 </ul>

或访问jsfiddle link获取有效示例。

Answer 1

我会为您的a代码添加透明边框：

li a {
    border: 1px transparent solid;
    border-width: 0 1px;
}

http://jsfiddle.net/dfsq/95ZUw/1/

Answer 2

不是最佳解决方案，但是...添加1px填充，然后在触发悬停时将其删除。在你的情况下可以做到这一点吗？

li {
list-style: none;
display: inline;
}

li > a { padding:0 1px; }

li a:hover {
border-left: 1px solid black;
border-right: 1px solid black;
padding:0;
}

添加边框以锚定悬停状态而不影响其余项目

2 个答案: