css nth-child first n 选择器不适用于悬停状态

Question

我在 flex 容器中有 9 个 div。

我想要实现的效果是，您悬停在上方的 div 将右侧的 div 推向更右侧，将左侧的 div 推向左侧。我想使用 nth-child 选择器来做到这一点，这样我只需要为每个 div 编写 2 种样式。

目前，我只是部分地在红色 div 上工作，作为概念证明。

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

那个 css 看起来像这样。

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

根据这篇关于 css 技巧的文章，https://css-tricks.com/useful-nth-child-recipies/，做前 4 个也应该很容易。

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

但这不起作用。我已经尝试删除第一个 css 选择器，我想也许你不能在一个类上拥有一个以上的悬停伪状态。但这并没有做任何事情。

然后我删除了悬停状态，所以我只有这个。

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

这很奏效。那么nth-child 使用-n 是否在它具有伪状态时不起作用？

悬停时有没有纯css解决方案来实现这个效果？还是我必须求助于javascript？

编辑：

这是我忘记链接的小提琴。

https://jsfiddle.net/q0x51kmw/1/

Answer 1

您可以非常简单地做到这一点，无需转换属性：

.team-cards-container {
  display: flex;
  margin: 55px 2.5%;
  height: 300px;
}

.team-card {
  flex: 1;
  transition: all .2s ease-in-out;
}

.team-card:hover {
  margin-right: 30px;
}

/*Colors*/
.team-card:nth-child(3n+1) {background-color: #949300}
.team-card:nth-child(3n+2) {background-color: #8A1B61}
.team-card:nth-child(3n+3) {background-color: #236192}
.team-card:nth-child(5) {background: #ff0000}

<div class="team-cards-container">
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
</div>

Answer 2

这是你的意思吗？

• .team-cards-container hover 移动所有孩子 -30px
• 当前（子）.team-card 悬停覆盖到 0px
• 当前.team-card 悬停的所有下一个兄弟姐妹都将被覆盖+30px

.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(-30px);
}
.team-cards-container .team-card:hover {
  transform: translateX(0);
}
.team-card:hover ~ .team-card {
  transform: translateX(30px);
}

<div class="team-cards-container">
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
  <div class="team-card"></div>
</div>

Answer 3

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;
}