css nth-child前n个选择器无法在悬停状态下工作

Question

我在一个flex容器中有9个div。

我要实现的效果是，您将div悬停在“推”右边的div和左边的div上。我想使用nth-child选择器执行此操作，因此我只需要为每个div编写2种样式。

就目前而言，我只是对红色div进行部分研究以证明其概念。

实现第一部分很容易，当您将鼠标悬停在红色div上时，使用use admin; db.createUser( { user: "root", pwd: "root123", roles: [ { role: "userAdminAnyDatabase", db: "admin" }, "readWriteAnyDatabase" ] } ) show users; { _id": "admin.root", "userId": UUID( "5db3aafd-b1fd-4bea-925e-8a4bfb709f22" ), "user": "root", "db": "admin", "roles": [ { "role": "userAdminAnyDatabase", "db": "admin" }, { "role": "readWriteAnyDatabase", "db": "admin" } ], "mechanisms": [ "SCRAM-SHA-1", "SCRAM-SHA-256" ] }

将其右边的4个div推到右侧。

css看起来像这样。

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(5):hover ~ .team-card:nth-child(-n+4){
  transform: translateX(-30px);
}

那行得通。那么，.team-card:nth-child(-n+4){ background-color:yellow; } 使用nth-child并处于伪状态时不起作用吗？

悬停时是否有纯CSS解决方案来实现此效果？还是我不得不求助于javascript？

编辑：

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

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

Answer 1

这是你的意思吗？

• .team-cards-container悬停可使所有子级移动-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 2

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

.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 3

css不允许您设置上一个兄弟元素的样式。您正在使用'〜'，但'〜'仅可用于设置下一个兄弟元素的样式

您做错了方法

以此替换您的CSS

io_service.run()