CSS：当导航的<li>项被悬停时如何转换DIV？

Question

我想用div-元素装饰水平导航，该元素会在导航下方“滑动”，具体取决于当前悬停的<li> 项目。

例子：

li:nth-child(1):hover { transform: translateX(100px) };
li:nth-child(2):hover { transform: translateX(200px) };
li:nth-child(3):hover { transform: translateX(300px) };
li:nth-child(4):hover { transform: translateX(400px) };

---

挑战：直到现在我都无法确定我必须使用哪个 CSS 选择器来移动 div。我已经尝试了this approach 中提到的所有解决方案，但都没有奏效。

---

示例：

* { list-style-type: none; }

ul { display: flex }

a {
    display: block;
    padding: 1em;
    color: white;
    background-color: orange;
}

.red_circle {
    display: block;
    top: 100px;
  height: 50px;
  width: 50px;
    background-color: red;
}

li:nth-child(1):hover > .red_circle,
li:nth-child(1):hover + .red_circle,
li:nth-child(1):hover .red_circle,
li:nth-child(1):hover ~ .red_circle, {
    transform: translatex(400px);
}

<container>
    <ul>
            <li><a href="#">Test 1</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
            <li><a href="#">Test 4</a></li>
    </ul>
    
    <div class="red_circle"</div>
    
</container>

Answer 1

目前无法在 CSS 中选择元素的父级。

如果有办法做到这一点，它会在当前的 CSS 选择器规范中：

Selectors Level 3 Spec

但要实现这一点，您可以修改您的 html 以将您的红色圆圈放在您的 ul 标记中

* {
  list-style-type: none;
}

ul {
  display: flex
}

a {
  display: block;
  padding: 1em;
  color: white;
  background-color: orange;
}

.red_circle {
  position: absolute;
  display: block;
  top: 100px;
  height: 50px;
  width: 50px;
  background-color: red;
  transition: transform 300ms;
}

li:nth-child(1):hover~.red_circle {
  transform: translatex(400px);
}

<container>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>

    <div class="red_circle"> </div>
  </ul>

</container>

---

编辑： 看完HTML 5 standard

零个或多个 li 和脚本支持元素。 所以我在评论中说过你可以使用:beforepseudo 元素

* {
  list-style-type: none;
}

.list-container {
  padding-left: 40px;
}

ul {
  display: flex;
  padding: 0;
  width: max-content;
}

a {
  display: block;
  padding: 1em;
  color: white;
  background-color: orange;
}

ul:before {
  content: '';
  position: absolute;
  display: block;
  top: 100px;
  height: 50px;
  width: 50px;
  background-color: red;
  transition: transform 1s;
}

ul:hover:before {
  transform: translatex(400px);
}

<container>
  <div class="list-container">
    <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
    </ul>
  </div>

</container>