Question

我正在尝试make a navbar作为练习。

我正在使用a:hover在悬停的按钮周围添加一个实线边框。但是，这会使所有其他按钮按边框大小移动。

这个问题的正确解决方法是什么？我知道还有其他人（讨论here），我特意试图让边界“看不见但即使没有徘徊也占用空间”。我设置border:transparent希望它可以做我想要的，但它根本没有显示占用空间。

我知道我可以手工挑选边框的颜色等于背景并使其坚固，但这不是我想要的。有没有理智的方法来解决这个问题？

Answer 1

border: 10px solid transparent怎么样？

Answer 2

您最好的选择是为元素添加填充或边距，其大小与边框相同，并使边框的宽度为零，然后显示边框并使用a:hover选择器删除填充。< / p>

这是一个样本。您也可以使用边距来执行此操作。

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

<a href="#">Hello World</a>

Answer 3

这不符合您预期的一个原因是因为您只在display:block上应用:hover，因此需要将其应用于没有：hover选择器的元素，否则您将获得“转移”的维度。使用哪种显示类型并不重要，您只需确保它们是相同的，默认情况下<a>是内联的。

另一个原因与您的速记边框有关，您需要为solid而不是none等透明版本添加边框类型。

您使用的技术完全合法，不需要填充黑客或大纲（不添加尺寸）。

http://jsfiddle.net/Madmartigan/kwdDB/

试试这个：

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}

Answer 4

您可以使用outline CSS属性而不是边框，边框的作用类似于边框，但在尺寸计算中不予考虑。

但是，这确实存在一些问题，not being supported by IEs 7 or earlier。

Answer 5

border:transparent表示border: transparent 0 none

如果在使用速记语法时未指定属性，则将所有属性重置为默认值。

你需要给它一个边框样式和边框宽度。

Answer 6

设置border-color：透明;做到了。

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}

Answer 7

使用伪元素::after和::before来隐藏不可见的边界。

你能做出“一个无形的边界”吗？

7 个答案: