样本

Question

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

我做了一个JS小提琴here。

Answer 1

您可以为非悬停状态添加透明边框，以避免边框出现时出现“跳跃”：

#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;

关于你的悬停状态。

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

样本

#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

与边框不同，您可以使用不会改变盒子大小的box-shadow。

Here is a little tutorial.

Answer 6

只需将以下代码添加到您的css文件

即可

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

Answer 7

CSS "box-sizing" attribute为我解决了这个问题。如果你给你的元素

.class-name {
    box-sizing: border-box; 
}

然后，当浏览器计算其宽度时，边框的宽度将添加到框的内部。这样，当您打开和关闭边框样式时，元素的大小不会改变（这是导致您观察到的抖动的原因）。

这是一项新技术，但支持边框is pretty consistent。这是一个demo！

Answer 8

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

添加以下代码：

<强> 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;
}

现场直播：Live Demo

希望它会有所帮助。

Answer 9

在悬停时添加负边距以补偿：

#homeheader a:hover{
    border: 1px solid #102447;
    margin: -1px;
}

updated fiddle

在小提琴中margin: -1px;有点复杂，因为有margin-right被覆盖，但它仍然只是减去新占用的空间。

Answer 10

我也遇到了同样的问题。 Wesley Murch提到的修复工作正常！即在要悬停的元素周围添加透明边框。

我有一个ul：hover被添加到每个li。每次，我都在每个列表项上徘徊，里面包含的元素也移动了。

以下是相关代码：

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("../images/connection4.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;
}

每个列表项上的悬停定义：

.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;

}

每当我在connectionsListItem上盘旋时，上面的代码用于使包含元素移位。修复程序将此添加到css中：

.connectionsListItem
{
    border:1px solid transparent;
}

Answer 11

使用：在创建边框之前，这样就不会修改实际内容并为您提供更多自由。看看这里： 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;  
    }
  }
}

Answer 12

这里没有人提到它，但在我看来，最好的和最简单的解决方案是使用＆＃34; box shadow＆＃34;而不是边界。魔术在＆＃34;插入＆＃34;允许它像一个寄宿生的价值。

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

您可以偏移X或Y以更改顶部/底部，并使用相反边的-negative值。

＆＃13;

.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;
}

＆＃13;

<div class="button"> Button </div>

＆＃13;

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

12 个答案:

样本