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

Question

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

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

Answer 1

您可以为非悬停状态添加透明边框,以避免出现边框时出现"跳跃":

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

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

Answer 2

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

Answer 3

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

这是有效的,因为你的阴影不会"占用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>

Answer 4

添加1px的边距并在悬停时移除该边距,因此它将被边框替换.

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

Answer 5

在承受了很长时间的压力后，我找到了一个很酷的解决方案。希望它能帮助别人。

在添加以下代码：

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 transparent;
}
.border-test:hover {
  outline: 0px solid transparent;
  border: 5px solid red;
}

现场检查：现场演示

希望它会有所帮助。

Answer 6

这里没有人提到它，但我认为最好和最简单的解决方案是使用“框阴影”而不是边框​​。神奇之处在于“插入”值，它使它像一个边框。

box-shadow: inset 0 -3px 0 0 red;

您可以偏移 X 或 Y 来更改顶部/底部，并对相对侧使用负值。

box-shadow: inset 0 -3px 0 0 red;

.button {
  width: 200px;
  height: 50px;
  padding: auto;
  background-color: grey;
  text-align: center;
}

.button:hover {
  box-shadow: inset 0 -3px 0 0 red;
  background-color: lightgrey;
}