Question

在伪元素之后，我有一个带有向右箭头的水平菜单。之后在悬停时进行过渡。问题是如果我将鼠标悬停在同级元素上也移动。

html

<ul> <li>item 1</li> <li> item 2</li> <li> item 3</li> </ul>

scss

ul {
 list-style: none;
  padding: 0;
  margin: 0;

  li {
    float: left;
    padding: 20px;

   &::after {
      content: " > ";
      width: 35px;
      height: 35px;
      transition: margin-left 0.1s ease-out;
    }

   &:hover {
      &::after {
        margin-left: 10px;
      }
   }
  }
}

我的问题：如何停止兄弟元素的移动？

注意：菜单项的内容来自CMS，所以我无法设置宽度

Answer 1

通过使用position属性（在我们的示例中，我们使用position：absolute），我们从普通文档流中删除了element（'>'），因此该元素不会影响普通文档流中的任何内容（在我们的例子中是李的兄弟姐妹）。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    float: left;
    padding: 20px;
    position: relative;
   &::after {
      position: absolute;
      content: " > ";
      width: 35px;
      height: 35px;
      transition: margin-left 0.1s ease-out;
    }
   &:hover {
      &::after {
        margin-left: 10px;     
      }
   }
  }
}

伪元素过渡后的水平li元素

1 个答案: