Question

关于这个问题，我已经阅读了近15个问题，但找不到有助于我想要的问题。

让我们说我有5个以金字塔形式堆叠的div，其中一个位于顶部中间，两个位于底部。

如果您将鼠标悬停在div1或div5上，我想要的是两者都会出现在前台。然后如果你将鼠标悬停在div2或div4上，那么他们两个将会到达前台。我尝试了很多东西，但通常如果你将鼠标悬停在一个上面，另一个会前进，但不会同时出现。或者我现在拥有的是我在父母div上盘旋的地方，两者都挺身而出，但是当我实际上将鼠标悬停在其中一个div上时，没有任何反应。

这是我现在的代码。

＆＃13;

#stack1 {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: #000000;
}
#boks3,
#boks1,
#boks2,
#boks4,
#boks5 {
  background-color: #ff3333;
  width: 32%;
  position: absolute;
  margin-left: 33.5%;
  z-index: 3;
  height: 300px;
  text-align: left;
  overflow: hidden;
}
#boks1 {
  background-color: #ff6666;
  margin-left: 2%;
  z-index: 1;
  height: 300px;
}
#boks2 {
  background-color: #ff4d4d;
  margin-left: 17%;
  z-index: 2;
  height: 300px;
}
#boks5 {
  background-color: #ff0000;
  margin-left: 65%;
  z-index: 1;
  text-align: right;
  height: 300px;
}
#boks4 {
  background-color: #ff1a1a;
  margin-left: 50%;
  z-index: 2;
  text-align: right;
  height: 300px;
}
#stack1:hover + #boks1,
#stack1:hover ~ #boks5 {
  background-color: yellow;
  z-index: 4;
}

＆＃13;

<div id="boks3">

</div>

<div id="stack1"></div>
<div id="boks1">

</div>
<div id="boks5">

</div>


<div id="stack2">
  <div id="boks2">

  </div>
  <div id="boks4">

  </div>
</div>

＆＃13;

我真的很想在CSS中这样做，因为我在Angular 2框架中使用它并且不想将jQuery添加到Angular 2框架中。

亲切的问候

Answer 1

我认为您需要将boks1和boks5包含到stack1以及boks2和boks4进入stack2。当您将鼠标悬停在任何boks es堆栈上时：悬停事件将会启动。

#stack1 {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: #000000;
}
#boks3,
#boks1,
#boks2,
#boks4,
#boks5 {
  background-color: #ff3333;
  width: 32%;
  position: absolute;
  margin-left: 33.5%;
  z-index: 3;
  height: 300px;
  text-align: left;
  overflow: hidden;
}
#boks1 {
  background-color: #ff6666;
  margin-left: 2%;
  z-index: 1;
  height: 300px;
}
#boks2 {
  background-color: #ff4d4d;
  margin-left: 17%;
  z-index: 2;
  height: 300px;
}
#boks5 {
  background-color: #ff0000;
  margin-left: 65%;
  z-index: 1;
  text-align: right;
  height: 300px;
}
#boks4 {
  background-color: #ff1a1a;
  margin-left: 50%;
  z-index: 2;
  text-align: right;
  height: 300px;
}
#stack1:hover #boks1,
#stack1:hover #boks5 {
  background-color: yellow;
  z-index: 4;
}
#stack2:hover #boks2,
#stack2:hover #boks4 {
  background-color: green;
  z-index: 4;
}

<div id="boks3">
</div>

<div id="stack1">
 <div id="boks1">
 </div>
 <div id="boks5">
 </div>
</div>

<div id="stack2">
  <div id="boks2">
  </div>
  <div id="boks4">
  </div>
</div>

CSS悬停一个div效果div加上另一个

1 个答案: