css第n个子项前n个选择器无法使用悬停状态

我在flex容器中有9个div

我试图达到的效果是，你悬停在上面的div将右边的div“推”到更远的右边，将左边的div“推”到更远的左边。我想使用第n个子选择器来实现这一点，这样我只需要为每个div编写2种样式

现在，我只是把它作为概念的一个证明，部分用于红色div

实现第一部分很容易，当您将鼠标悬停在红色div上时，它右侧的4个div将使用translateX30px推到右侧

css看起来像这样

.team-card:nth-child(5):hover ~ .team-card:nth-child(n+4){
  transform: translateX(30px);
}

根据这篇关于css技巧的文章，完成前4项也应该很容易

.team-card:nth-child(5):hover ~ .team-card:nth-child(-n+4){
  transform: translateX(-30px);
}

但这不起作用。我尝试删除第一个css选择器，认为一个类上最多只能有一个悬停psuedo状态。但那没用

然后我移除了悬停状态，所以我就有了这个

.team-card:nth-child(-n+4){
  background-color:yellow;
}

这起作用了。那么，使用-n的第n个子级在具有psuedo状态时是否不起作用

当鼠标悬停时，是否有一个纯css解决方案可以实现这种效果？还是我必须求助于javascript

编辑：

这是我忘记链接的小提琴

这就是你的意思吗

.团队卡容器悬停移动所有子项-30px 当前子项。团队卡悬停覆盖为0px 当前团队卡悬停的所有下一个同级被覆盖+30px .团队卡容器{ 显示器：flex； 宽度：95%； 左边距：自动； 右边距：自动； 填充顶部：55px； } /*颜色*/ .团队卡：N-child3n+1{ 高度：300px； 宽度：230px； 背景色：949300； } .团队卡：N-child3n+2{ 高度：300px； 宽度：230px； 背景色：8A1B61； } .团队卡：N-child3n+3{ 高度：300px； 宽度：230px； 背景色：236192； } /*中间的*/ .团队卡：nth-child5{ 背景：红色； } /*共性*/ .团队卡{ 转换：所有.2易入易出； } .团队卡容器：悬停。团队卡{ 转换：translateX-30px； } .团队卡容器。团队卡：悬停{ transform:translateX0； } .团队卡：悬停~.团队卡{ 转换：translateX30px； } 这就是你的意思吗

.团队卡容器悬停移动所有子项-30px 当前子项。团队卡悬停覆盖为0px 当前团队卡悬停的所有下一个同级被覆盖+30px .团队卡容器{ 显示器：flex； 宽度：95%； 左边距：自动； 右边距：自动； 填充顶部：55px； } /*颜色*/ .团队卡：N-child3n+1{ 高度：300px； 宽度：230px； 背景色：949300； } .团队卡：N-child3n+2{ 高度：300px； 宽度：230px； 背景色：8A1B61； } .团队卡：N-child3n+3{ 高度：300px； 宽度：230px； 背景色：236192； } /*中间的*/ .团队卡：nth-child5{ 背景：红色； } /*共性*/ .团队卡{ 转换：所有.2易入易出； } .团队卡容器：悬停。团队卡{ 转换：translateX-30px； } .团队卡容器。团队卡：悬停{ transform:translateX0； } .团队卡：悬停~.团队卡{ 转换：translateX30px； }

---

您可以非常简单地执行此操作，而无需使用transform属性：

.团队卡容器{ 显示器：flex； 利润率：55px2.5%； 高度：300px； } .团队卡{ 弹性：1； 转换：所有.2易入易出； } .团队卡：悬停{ 右边距：30px； } /*颜色*/ .团队卡：nth-child3n+1{背景色：949300} .团队卡：nth-child3n+2{背景色：8A1B61} .团队卡：nth-child3n+3{背景色：236192} .团队卡：nth-child5{背景：ff0000}

---

您可以非常简单地执行此操作，而无需使用transform属性：

.团队卡容器{ 显示器：flex； 利润率：55px2.5%； 高度：300px； } .团队卡{ 弹性：1； 转换：所有.2易入易出； } .团队卡：悬停{ 右边距：30px； } /*颜色*/ .团队卡：nth-child3n+1{背景色：949300} .团队卡：nth-child3n+2{背景色：8A1B61} .团队卡：nth-child3n+3{背景色：236192} .团队卡：nth-child5{背景：ff0000}

---

css不允许您设置上一个同级元素的样式。您正在使用“~”，但“~”只能用于设置下一个同级元素的样式

你做得不对

用这个替换你的css

.team-cards-container{
  display:flex;
  width:95%;
  margin-left:auto;
  margin-right:auto;
  padding-top:55px;
}

/*Colors*/
.team-card:nth-child(3n+1){
  height:300px; 
  width:230px;
  background-color:#949300;
}
.team-card:nth-child(3n+2){
  height:300px; 
  width:230px;
  background-color:#8A1B61;
}
.team-card:nth-child(3n+3){
  height:300px; 
  width:230px;
  background-color:#236192;
}

/*Middle*/
.team-card:nth-child(5){
  background:red;
}

/*Universals*/
.team-card{
  transition: all .2s ease-in-out;
}


.team-cards-container:hover > .team-card{
  transform:translateX(-20px);
}

.team-card:hover{
  transform:translateX(0px)!important;
}


.team-card:hover~.team-card{
  transform:translateX(20px)!important;
}

---

css不允许您设置上一个同级元素的样式。您正在使用“~”，但“~”只能用于设置下一个同级元素的样式

你做得不对

用这个替换你的css

.team-cards-container{
  display:flex;
  width:95%;
  margin-left:auto;
  margin-right:auto;
  padding-top:55px;
}

/*Colors*/
.team-card:nth-child(3n+1){
  height:300px; 
  width:230px;
  background-color:#949300;
}
.team-card:nth-child(3n+2){
  height:300px; 
  width:230px;
  background-color:#8A1B61;
}
.team-card:nth-child(3n+3){
  height:300px; 
  width:230px;
  background-color:#236192;
}

/*Middle*/
.team-card:nth-child(5){
  background:red;
}

/*Universals*/
.team-card{
  transition: all .2s ease-in-out;
}


.team-cards-container:hover > .team-card{
  transform:translateX(-20px);
}

.team-card:hover{
  transform:translateX(0px)!important;
}


.team-card:hover~.team-card{
  transform:translateX(20px)!important;
}

---

您不能将鼠标悬停在元素上，以上一个元素为目标。因此，我必须求助于javascript解决方案。您不能通过将鼠标悬停在elementGotcha上来瞄准上一个元素。所以我必须求助于javascript解决方案。这正是我想要的。非常聪明。谢谢你的解释。当计时器允许时，我将接受这个答案。@在Internet上看到我的答案，你可以用一种更简单的方式来做。这正是我想要的

---

呃。非常聪明。谢谢你的解释。当计时器允许时，我将接受此答案。@在Internet上查看我的答案，您可以用一种更简单的方式来做。这是一个更好的答案。这是一个更好的答案。