Hover 超過另一個 div 時

Question

當我 hover 超過“Div2”時，我希望“Div1”的 hover 工作

 .Div1:hover{ background:red; }

 <div class="Div1">Hello!</div> <div class="Div2">Open hello!</div>

Answer 1

您可以為兩者選擇一個 class 以使吸塵器對兩者都有效。

 .DivHoover:hover{ background:red; }

 <div class="Div1 DivHoover">Hello!</div> <div class="Div1 DivHoover">Open hello!</div>

Answer 2

您可以在容器上使用 display: flex，然后更改渲染順序。 然后你可以在 div2 上 hover 並突出顯示 div1。

.container {
  display: flex;
  flex-wrap: wrap;
}

.div1, .div2 {
  flex: 0 0 100%;
}

.div1 { order: 1; }
.div2 { order: 2; }

.div2:hover ~ .div1 {
  background-color: red;
}

<div class="container">
  <div class="div2">hello!</div>
  <div class="div1">open hello!</div>
</div>