html - 悬停时如何使元素保持在CSS的位置

Question

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

像这样：-

过渡前

过渡后

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

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

标签： htmlcss

Answer 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。_ 所以只需从宽度中减去border-left宽度padding-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;
        }
      }
    }