CSShover边界使内联元素略微调整
我有一个无序列表或锚点。 我有一个CSS：hover事件，增加了边界，但左侧的所有锚稍微调整，当我hover，因为它是增加1px的宽度和自动调整。 我如何确保定位是绝对的？
我在这里做了一个JS小提琴。
您可以将透明边框添加到非hover状态以避免出现边框时的“跳跃”：
#homeheader a:visited, #homeheader a{ border:1px solid transparent; } 你也可以使用outline ，这将不会影响宽度，即没有“跳跃”效果。 但是，不幸的是，你不能使轮廓圆整。
添加1px的边距并在hover时删除该边距，以便将其replace为边框。
你可以使用盒子阴影，而不是这种function的边框。
这是有效的，因为你的影子不会“占用DOM的大小”，所以不会影响定位，不像边界。
尝试使用类似的声明
box-shadow:0 0 1px 1px #102447;
而不是你的
border:1px solid #102447;
在你的hover状态。
下面是这个实例的快速演示：
DEMO
#homeheader a:visited, #homeheader a { text-decoration: none; color: black; margin-right: 5px; } #homeheader a:hover { background-color: #D0DDF2; border-radius: 5px; box-shadow: 0 0 1px #102447; } #homeheader li { padding: 0; margin: 0px 10px; display: inline; font-size: 1em; }
<div id="homecontainer"> <div id="homeheader"> <ul> <li><a href="#">this</a> </li> <li><a href="#">that</a> </li> <li><a href="#">this again</a> </li> <li><a href="#">that again</a> </li> </ul> </div> </div>
不像边框，你可以使用不影响盒子大小的盒子阴影。
这是一个小教程。
CSS的“盒子大小”属性为我解决了这个问题。 如果你给你的元素
.class-name { box-sizing: border-box; }
然后，当浏览器计算宽度时，边框的宽度将被添加到框的内部 。 这样，当您打开和closures边框样式时，元素的大小不会改变（这是导致您观察到的抖动的原因）。
这是一项新技术，但对边框的支持是相当一致的 。 这里是一个演示 ！
在hover上添加负边距以补偿：
#homeheader a:hover{ border: 1px solid #102447; margin: -1px; }
更新的小提琴
在小提琴的margin: -1px; 有一点更为复杂，因为有一个margin-right被覆盖，但这只是一个减去新占用空间的问题。
只需将下面的代码添加到您的css文件
#homeheader a { border:1px solid transparent; }
我也面临同样的问题。 Wesley Murch提到的修复工作！ 即在要hover的元素周围添加透明边框。
我有一个UL：hover被添加到每一个李。 每一次，我都徘徊在每一个列表项上，里面的元素都被移动了。
这是相关的代码：
HTML
<ul> <li class="connectionsListItem" id="connectionsListItem-0"> <div class="listItemContentDiv" id="listItemContentDiv-0"> <span class="connectionIconSpan"></span> <div class="connectListAnchorDiv"> <a href="../test/1.html" class="homeConnectionListanchor" id="leftTabConnectionListAnchor-0">Test1</a> </div> </div> </li> </ul>
CSS
.listItemContentDiv { display: inline-block; padding: 8px; right: 0; text-align: left; text-decoration: none; text-indent: 0; } .connectionIconSpan { background-image: url("..http://img.dovov.comconnection4.png"); background-position: 100% 50%; background-repeat: no-repeat; cursor: pointer; padding-right: 0; background-color: transparent; border: medium none; clear: both; float: left; height: 32px; width: 32px; } .connectListAnchorDiv { float: right; margin-top: 4px; }
hover定义每个列表项目：
.connectionsListItem:hover { background-color: #F0F0F0; background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7); box-shadow: none; text-shadow: none; border-radius: 10px 10px 10px 10px; border-color: #AAAAAA; border-style: solid; }
上面的代码用于使包含元素移位，每当我hover在connectionsListItem。 修复这是添加到CSS为：
.connectionsListItem { border:1px solid transparent; }
使用：在创build边框之前，这样就不会修改实际的内容，给你更多的自由。 看看这里： http : //codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div> <div class='before'>Before</div> div{ width:300px; height:100px; text-align:center; margin:1rem; position:relative; display:flex; justify-content:center; align-items: center; background-color:#eee; } .border{ border-left:10px solid deepPink; } .before{ &:before{ content:""; position:absolute; background-color:deepPink; width:10px; height:100%; left:0; top:0; } &:hover{ background-color:#ccc; &:before{ width:0px; transition:0.2s; } } }
经过长时间的压力，我发现一个很酷的解决scheme。 希望它能帮助别人。
在添加以下代码：
HTML
<div class="border-test"> <h2> title </h2> <p> Technology founders churn rate niche market </p> </div>
CSS
.border-test { outline: 1px solid red; border: 5px solid traparent; } .border-test:hover { outline: 0px solid traparent; border: 5px solid red; }
现场直播： 现场演示
希望它会有所帮助。
我发现的最简单的方法是使用“轮廓”而不是“边框”。
#home:hover{ outline:1px solid white; }
代替
#home:hover{ border:1px solid white; }
作品最好！
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
