How do I change an element's css while hovering over an element which lies after it?-CodePudding

I want to change the opacity of .dividor to 0 while hovering over any of the other divs. I don't know how to do this for the .secondDiv. I am just learning CSS.

HTML:

<div class="base">
   <div class="FirstDiv"></div>
   <div class="Dividor"></div>
   <div class="SecondDiv"></div>
</div>

My CSS:

.base > div:hover   div {
  opacity: 0;
}

CodePudding user response：

Add the hover to the parent element

.base:hover > div.Dividor {
 opacity: .1;
}

<div class="base">
   <div class="FirstDiv">Hello World 1</div>
   <div class="Dividor"> Dividor</div>
   <div class="SecondDiv">Hello World 2</div>
</div>