你能做一个“看不见的边界”吗？
你能做一个“看不见的边界”吗？
提问于 2011-04-26 20:51:37
我正在尝试将make a navbar作为一种练习。
我使用a:hover在悬停的按钮周围添加一个实线边框。但是，这会使所有其他按钮根据边框的大小移动。
这个问题的正确解决方法是什么？我知道还有其他的(讨论了here)，我特别尝试使边界“不可见，但即使不悬停也会占用空间”。我设置了border:transparent，希望它能做我想做的事情，但它根本没有显示take space。
我知道我可以手工挑选边框的颜色与背景相等，并使其实心，但这不是我想要的。有没有一个明智的方法来解决这个问题？
回答 8
Stack Overflow用户
回答已采纳
发布于 2011-04-26 21:14:52
那border: 10px solid transparent呢？
Stack Overflow用户
发布于 2011-04-26 20:53:33
您的最佳选择是向元素添加与边框大小相同的边距或边距，并使边框的宽度为零，然后使用a:hover选择器显示边框并删除边距。
这是一个示例。你通常也可以用边距做到这一点。
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>
Stack Overflow用户
发布于 2011-04-26 21:01:41
这不能像您预期的那样工作的一个原因是因为您只在:hover上应用了display:block，它需要应用于没有:hover选择器的元素，否则您将获得“移位”维度。使用哪种显示类型并不重要，您只需确保它们是相同的，并且默认情况下<a>是内联的。
另一个原因与您的速记边框有关，您需要为透明版本添加一个边框类型，如solid而不是none。
你使用的技术是完全合法的，不需要填充hack或轮廓(这不会增加维度)。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5790615
复制相关文章
相似问题
腾讯云开发者
