Question

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

就像这样：-

转换前

过渡后

正如您在图像中看到的那样，“关于我们”在悬停后向左移动了一点，这是因为边界。我如何使其保持原位？这是我的代码

class Test{
   void addIntegers(Set<Integer> ii){}
   void addStrings(Set<String> ss){}
}

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

Answer 2

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

您可以为两种状态（初始状态和:hover）定义边界。在初始状态下，边框的颜色应设置为与项目的背景色相同，可以在hover状态下进行更改。

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

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

2 个答案:

编辑：