悬停时如何使元素保持在CSS的位置答案

【问题标题】：How can I make the element stay in its place with CSS when hovering悬停时如何使元素保持在CSS的位置
【发布时间】：2019-12-01 00:19:56
【问题描述】：

我有一个元素，当我想将鼠标悬停在它上面时。它显示了我想要的边框，但是，它的作用是缩放文本并实际移动它......

像这样：-

过渡前

过渡后

正如您在图片中看到的那样，“关于我们”在悬停后向左移动了一点，这是因为边框的缘故。我怎样才能让它留在它的位置？这是我的代码

&--dropdown {
      list-style: none;
      position: absolute;
      width: 25rem;
      height: 14rem;
      background-color: $color-additional;
      overflow: hidden;

      &-item {
        position: relative;
        width: 34rem;
        padding: 1rem 0 1rem 2rem;
        transition: all ease 0.2s;
        &:not(:first-of-type) {
          border-top: 1px solid $color-navigation-border;
        }
        &:hover {
          background-color: $color-white;
          border-left: 5px solid $color-primary;
        }
        &-link {
          color: $color-black;
          text-decoration: none;
        }
      }
    }

【问题讨论】：

在此处添加代码进行澄清
您是否尝试使用outline 属性，而不是border？或者将属性box-sizing 设置为border-box。您的代码的一瞥将在这里有所帮助。另一种方法是永久添加边框，无论元素是否悬停，并将边框颜色设置为背景颜色，在初始状态。
@AkshitMehra 你去。添加代码
@AkshitMehra outline 不是一个好主意，box-sizing: border-box 将不起作用。但是，您的最后一种方法会奏效。
感谢@Aaron3219 纠正！您发布的答案会很好用。

标签： html css

【解决方案1】：

不要为此使用outline。相反，将左侧填充降低边框添加的数量。

li {
  width: 300px;
  padding: 20px 30px;
  list-style: none;
  background: yellow;
  border-bottom: 1px solid black;
}

li:hover {
  border-left: 5px solid red;
}

<li>Test</li>
<li>Test2</li>

这就是你现在的样子。 padding-left 是 30px，在 :hover 上，border-left 加上 5px。所以只需从padding-left 宽度中减去border-left 宽度：

li {
  width: 300px;
  padding: 20px 30px;
  list-style: none;
  background: yellow;
  border-bottom: 1px solid black;
}

li:hover {
  border-left: 5px solid red;
  padding-left: 25px;
}

<li>Test</li>
<li>Test2</li>

编辑：

由于您现在提供了一些代码，因此只需将其更改为：

&--dropdown {
      list-style: none;
      position: absolute;
      width: 25rem;
      height: 14rem;
      background-color: $color-additional;
      overflow: hidden;

      &-item {
        position: relative;
        width: 34rem;
        padding: 1rem 0 1rem 2rem;
        transition: all ease 0.2s;
        &:not(:first-of-type) {
          border-top: 1px solid $color-navigation-border;
        }
        &:hover {
          background-color: $color-white;
          border-left: 5px solid $color-primary;
          padding-left: calc(2rem - 5px); //<-- I added this line of code
        }
        &-link {
          color: $color-black;
          text-decoration: none;
        }
      }
    }

【讨论】：

没问题 ;)。还要记下 Akshit Mehra 的回答，因为它也会起作用。只需决定你想使用什么。

【解决方案2】：

请注意：这是解决此问题的众多解决方案之一。

您可以为状态、初始状态以及:hover 定义边界。在初始状态下，边框的颜色应该设置为与item的背景颜色相同，在hover状态下可以改变。

&-item {
    border-left: 5px solid <your_bg_colour>;
    &:hover {
      border-left-color: <hover_state_colour>;
    }
  }

【讨论】：

刚刚使用@Aaron3219的第一个解决方案，谢谢