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

Posted 2023-03-06

【中文标题】CSS：如果 Last-Child <li> 悬停，如何影响：伪元素之后？

【英文标题】：CSS: How to affect :after Pseudo Element if Last-Child <li> gets hovered?

【发布时间】：2021-08-08 06:37:41

【问题描述】：

挑战：

当悬停列表的<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>

【问题讨论】：

因为第 4 个元素是最后一个子元素

您有什么理由不能创建一个空的<li> 作为您的最后一个孩子并将其用作您的红块？摆脱 after 伪并将空 li 定位为最后一个孩子。

【参考方案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>

【讨论】：

值得注意的是，悬停在红色方块上现在会触发第四个li的悬停。您可以使用li:last-child:after pointer-events: none;

解决此问题

【参考方案2】：

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

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