CSS：如果 Last-Child <li> 悬停，如何影响：伪元素之后？

Question

挑战：

• 当悬停列表的<li> 元素时，名为li:last-child:after 的伪元素会受到影响
• 根据<li> 得到:hovered，伪元素会受到影响

例子：

• 悬停li:nth-child(1) 应将伪元素100px 向右移动，
• 悬停li:nth-child(2) 应将伪元素200 px 向右移动，等等。

编码：

对于<li> 1 到 3 的项目，我成功完成了这项工作，但不幸的是，最后一个孩子没有。我的问题在哪里？

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}

/*Failed experiments about creating the desired action for li last child*/
li:nth-child(4):hover + li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover > li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover li:last-child:after { transform: translatex(400px);}

<div>
   <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>

Answer 1

li:nth-child(4):hover 已经在说

li，第4个元素，被悬停

所以li:nth-child(4):hover + li:last-child:after 正在寻找紧随第四个元素并且也是最后一个子元素的第五个li 兄弟姐妹。

li:nth-child(4):hover ~ li:last-child:after 正在寻找第 5 个 li 兄弟，它位于第 4 个元素之后的某个位置，也是最后一个子元素。

li:nth-child(4):hover > li:last-child:after 正在寻找一个li，它是第四个li 的孩子，也是最后一个孩子。

而li:nth-child(4):hover li:last-child:after 正在寻找一个li，它是第四个li 的后代，也是最后一个孩子。

根据您要查找的内容，您可以使用：

li:nth-child(4):hover:after { transform: translatex(400px);}

li:last-child:hover:after { transform: translatex(400px);}

或li:nth-child(4):hover:last-child:after { transform: translatex(400px);}，如果您想与其他人保持一致。

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}


li:nth-child(4):hover:last-child:after { transform: translatex(400px);}

<div>
   <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>

Answer 2

对于最后一个孩子，需要采用不同的方法：

li:last-child:hover:after { transform: translatex(400px);}