CSShover边界使内联元素略微调整

我有一个无序列表或锚点。 我有一个CSS:hover事件,增加了边界,但左侧的所有锚稍微调整,当我hover,因为它是增加1px的宽度和自动调整。 我如何确保定位是绝对的?

我在这里做了一个JS小提琴。

您可以将透明边框添加到非hover状态以避免出现边框时的“跳跃”:

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{ border:1px solid transparent; } 

你也可以使用outline ,这将不会影响宽度,即没有“跳跃”效果。 但是,不幸的是,你不能使轮廓圆整。

添加1px的边距并在hover时删除该边距,以便将其replace为边框。

http://jsfiddle.net/TEUhM/4/

你可以使用盒子阴影,而不是这种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