Html 你能做出“无形的边界”吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5790615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you make "an invisible border"?
提问by ripper234
I'm trying to make a navbaras an exercise.
我正在尝试制作导航栏作为练习。
I'm using a:hoverto include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.
我正在使用a:hover在悬停按钮周围包含一个实心边框。但是，这会使所有其他按钮移动边框的大小。
What is the proper fix to this problem? I know there are others (discussed here), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set border:transparenthoping it might do what I want, but it did not show take space at all.
这个问题的正确解决方法是什么？我知道还有其他人（在此处讨论），我特别尝试使边界“不可见，但即使不悬停也会占用空间”。我border:transparent希望它可以做我想做的事，但它根本没有显示占用空间。
I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?
我知道我可以手动选择边框的颜色与背景相同并使其纯色，但这不是我想要的。有没有理智的方法来解决这个问题？
回答by Phliplip
How about border: 10px solid transparent?
怎么样border: 10px solid transparent？
回答by derekerdmann
Your best option would be to add padding or margins to your element that's the same size as the border and make the border have zero width, and then show the border and remove the padding with the a:hoverselector.
您最好的选择是向与边框大小相同的元素添加填充或边距，并使边框的宽度为零，然后显示边框并使用a:hover选择器删除填充。
Here's a sample. You can often do this with margins too.
这是一个示例。您通常也可以使用边距来做到这一点。
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>回答by Wesley Murch
One reason this isn't working as you'd expect is because you are only applying display:blockon :hover, it needs to be applied to the element without the :hover selector or you will get the "shifting" dimensions. It doesn't matter which display type you use, you just have to make sure they are the same, and by default <a>is inline.
一个原因这是行不通的，你会想到的是，因为你只申请display:block上:hover，它需要被应用到元素而不：悬停选择，否则你会得到“转向”的尺寸。您使用哪种显示类型并不重要，您只需要确保它们相同，并且默认情况下<a>是内联的。
Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like solidinstead of none.
另一个原因与您的速记边框有关，您需要为透明版本添加边框类型，solid而不是none.
The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).
您使用的技术是完全合法的，不需要填充技巧或轮廓（不会增加尺寸）。
http://jsfiddle.net/Madmartigan/kwdDB/
http://jsfiddle.net/Madmartigan/kwdDB/
Try this:
尝试这个：
#wd-navbar li a {
border: medium solid transparent;
display: block;
margin: 1px;
}
#wd-navbar li a:hover {
background-color: #F5DEB3;
border: medium solid;
}
回答by Gareth
You could use the outlineCSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.
您可以使用outlineCSS 属性代替边框，它的作用类似于边框，但不会在大小计算中考虑在内。
However, this does have some issues, not being supported by IEs 7 or earlier.
但是，这确实存在一些问题，IE 7 或更早版本不支持。
回答by Quentin
border:transparentmeans border: transparent 0 none
border:transparent方法 border: transparent 0 none
If you don't specify a property when using shorthand syntax then you reset all the properties to their defaults.
如果在使用速记语法时未指定属性，则将所有属性重置为其默认值。
You need to give it a border-style and a border-width.
你需要给它一个边框样式和一个边框宽度。
回答by user2647710
Setting border-color : transparent ; does the job.
设置边框颜色：透明；做这份工作。
a {
border-color : transparent ;
}
a:hover {
border-color : black;
}
回答by abhit
use pseudo elements ::afterand ::beforeto ceate invisible boundaries.
使用伪元素::after并::before创建不可见的边界。
