CSS悬停边框使内联元素稍微调整

Question

CSS悬停边框使内联元素稍微调整

我有一个无序的列表或锚点。我有一个CSS：悬停事件，它添加了边框但左边的所有锚点稍微调整，当我悬停，因为它是向宽度添加1px并自动调整。我如何确保定位是绝对的？

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

Answer 1

你也可以使用outline，这不会影响宽度，即没有“跳跃”效果。但是，遗憾的是，您无法对轮廓进行舍入。

Answer 2

您可以使用框阴影而不是边框来实现此类功能。这是有效的，因为你的阴影不会“占用DOM中的大小”，因此不会影响定位，不像边框那样。尝试使用像这样的声明box-shadow:0&nbsp;0&nbsp;1px&nbsp;1px&nbsp;#102447;而不是你的border:1px&nbsp;solid&nbsp;#102447;在你的悬停状态。以下是此操作的快速演示：DEMO#homeheader&nbsp;a:visited,#homeheader&nbsp;a&nbsp;{ &nbsp;&nbsp;text-decoration:&nbsp;none; &nbsp;&nbsp;color:&nbsp;black; &nbsp;&nbsp;margin-right:&nbsp;5px;}#homeheader&nbsp;a:hover&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;#D0DDF2; &nbsp;&nbsp;border-radius:&nbsp;5px; &nbsp;&nbsp;box-shadow:&nbsp;0&nbsp;0&nbsp;1px&nbsp;#102447;}#homeheader&nbsp;li&nbsp;{ &nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;margin:&nbsp;0px&nbsp;10px; &nbsp;&nbsp;display:&nbsp;inline; &nbsp;&nbsp;font-size:&nbsp;1em;}<div&nbsp;id="homecontainer"> &nbsp;&nbsp;<div&nbsp;id="homeheader"> &nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="#">this</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="#">that</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="#">this&nbsp;again</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="#">that&nbsp;again</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;</div></div>