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

Question

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

Answer 1

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

Answer 2

您可以使用框阴影而不是边框来实现此类功能。

这是有效的，因为你的阴影不会“占用DOM中的大小”，因此不会影响定位，不像边框那样。

尝试使用像这样的声明

box-shadow:0 0 1px 1px #102447;

而不是你的

border:1px solid #102447;

在你的悬停状态。

以下是此操作的快速演示：

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>