Hover over another div when it comes to-CodePudding

when I hover over "Div2", I want the hover of "Div1" to work

.Div1:hover{
  background:red;
}

<div >Hello!</div>

<div >Open hello!</div>

CodePudding user response：

You can choose one class for both to make hoover works for both.

.DivHoover:hover{
  background:red;
}

<div >Hello!</div>

<div >Open hello!</div>

CodePudding user response：

You can use display: flex on the container, then change the rendering order. Then you can hover on div2 and highlight 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 >
  <div >hello!</div>
  <div >open hello!</div>
</div>