blocks|key|2044481|text|您的最佳选择是向元素添加与边框大小相同的边距或边距，并使边框的宽度为零，然后使用a:hover选择器显示边框并删除边距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2044482|这是一个示例。你通常也可以用边距做到这一点。|2044483|​|2044484|a+{
++++display:+inline-block;
++++height:+2em;+width:+100px;
++++padding:+2px;
++++background:+#0ff;
}

a:hover+{
++++padding:+0;
++++border+:2px+solid+#000;
}|code-block|syntax|javascript|2044485|<a+href="#">Hello+World</a>|2044486|2044487|entityMap^0|14|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Y|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

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 <code>a:hover</code> selector.

Here's a sample. You can often do this with margins too.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
 display: inline-block;
 height: 2em; width: 100px;
 padding: 2px;
 background: #0ff;
}

a:hover {
 padding: 0;
 border :2px solid #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;Hello World&lt;/a&gt;</code></pre>
</div>
</div>

blocks|key|2379672|text|您可以使用outline+CSS属性而不是边框，边框的作用类似于边框，但在计算大小时不会将其考虑在内。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2379673|然而，这确实有一些问题，not+being+supported+by+IEs+7+or+earlier。|2379674|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines|1|http://www.webdevout.net/browser-support-css?uas=IE6-IE7-IE8-FX2-FX3-OP9#support-css2propsbasic-outline^0|5|7|5|7|0|0|C|13|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

You could use the <a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines" rel="nofollow"><code>outline</code></a> CSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.

However, this does have some issues, <a href="http://www.webdevout.net/browser-support-css?uas=IE6-IE7-IE8-FX2-FX3-OP9#support-css2propsbasic-outline" rel="nofollow">not being supported by IEs 7 or earlier</a>.

blocks|key|2379685|text|border:transparent的意思是border:+transparent+0+none|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2379686|如果在使用速记语法时没有指定属性，则将所有属性重置为其默认值。|2379687|你需要给它一个边框样式和一个边框宽度。|2379688|entityMap^0|0|I|M|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<code>border:transparent</code> means <code>border: transparent 0 none</code>

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.

blocks|key|424732|text|这不能像您预期的那样工作的一个原因是因为您只在:hover上应用了display:block，它需要应用于没有:hover选择器的元素，否则您将获得“移位”维度。使用哪种显示类型并不重要，您只需确保它们是相同的，并且默认情况下<a>是内联的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|424733|另一个原因与您的速记边框有关，您需要为透明版本添加一个边框类型，如solid而不是none。|424734|你使用的技术是完全合法的，不需要填充hack或轮廓(这不会增加维度)。|424735|http://jsfiddle.net/Madmartigan/kwdDB/|424736|试试这个：|424737|#wd-navbar+li+a+{
+++++border:+medium+solid+transparent;
+++++display:+block;
+++++margin:+1px;
}

#wd-navbar+li+a:hover+{
+++++background-color:+#F5DEB3;
+++++border:+medium+solid;
}|code-block|syntax|javascript|424738|entityMap|0|LINK|mutability|MUTABLE|url^0|N|6|X|D|35|3|0|X|5|15|4|0|0|0|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|L|3|M|5|6|7|1G|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1H|8|@]|D|@]|E|$Q|R]]|$1|S|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|K]]]]

One reason this isn't working as you'd expect is because you are only applying <code>display:block</code> on <code>:hover</code>, 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 <code>&lt;a&gt;</code> is inline.

Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like <code>solid</code> instead of <code>none</code>.

The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).

<a href="http://jsfiddle.net/Madmartigan/kwdDB/" rel="nofollow">http://jsfiddle.net/Madmartigan/kwdDB/</a>

Try this:

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

#wd-navbar li a:hover {
 background-color: #F5DEB3;
 border: medium solid;
}
</code></pre>

blocks|key|424753|text|那border:+10px+solid+transparent呢？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|424754|entityMap^0|1|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

How about <code>border: 10px solid transparent</code> ?

blocks|key|4118346|text|设置边框颜色:透明；执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4118347|a+{
++border-color+:+transparent+;
}

a:hover+{
+++border-color+:+black;
}|code-block|syntax|javascript|4118348|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Setting border-color : transparent ; does the job.

<pre><code>a {
 border-color : transparent ;
}

a:hover {
 border-color : black;
}
</code></pre>

blocks|key|2044618|text|使用伪元素::after和::before创建不可见的边界。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2044619|entityMap^0|5|7|D|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

use pseudo elements <code>::after</code> and <code>::before</code> to ceate invisible boundaries.

blocks|key|2044670|text|请注意，只有当元素上没有任何框阴影时，透明边框才有用。看看这张图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2044671|​|2044672|📷|atomic|offset|length|2044673|2044674|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e74745c087b9f4d6140276b2c6a50baa.jpeg|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

Please note that transparent border is just useful when you don't have any box-shadow on the element. Have a look at the image:
<a href="https://i.stack.imgur.com/VJwh7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VJwh7.jpg" alt="transparent border issue when there is shadow" /></a>

I'm trying to <a href="http://jsbin.com/imuwe4" rel="noreferrer">make a navbar</a> as an exercise.

I'm using <code>a:hover</code> to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.

What is the proper fix to this problem? I know there are others (discussed <a href="http://www.youtube.com/watch?v=SuL2tSlJtSk&amp;feature=player_embedded" rel="noreferrer">here</a>), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set <code>border:transparent</code> hoping it might do what I want, but it did not show take space at all.

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?

Can you make "an invisible border"?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试将作为一种练习。我使用a:hover在悬停的按钮周围添加一个实线边框。但是，这会使所有其他按钮根据边框的大小移动。这个问题的正确解决方法是什么？我知道还有其他的(讨论了)，我特别尝试使边界“不可见，但即使不悬停也会占用空间”。我设置了border:transparent，希望它能做我想做的事情，但它根本没有显...

问你能做一个“看不见的边界”吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能做一个“看不见的边界”吗？EN