0

I want to create a hover mechanism where hovering on one div will result in changing the width of another div as below

HTML

<div id='Slider_1'></div>   
<div id='Footer_Holder'></div>

CSS

#Slider_1 {
  color: #ffffff;
  background-color: blue;
  text-align: center;
  transition: width 1s ; 
  width: 0%;
  height: 130px;
  z-index: 10;
}

#Footer_Holder {  
  background-color: red;
  width: 150px;
  height: 150px;
}

#Footer_Holder:hover + #Slider_1 {
  width: 100%;
}

Code pen link - https://codepen.io/Volabos/pen/dyyMqzy

Surprising above code is working if I change the placements of div as below -

Can you please guide me to the right direction where I want to put <div id='Slider_1'> on top of <div id='Footer_Holder'></div>

Bogaso
  • 2,838
  • 3
  • 24
  • 54
  • 1
    One solution would be to get your CSS selector working (i.e. put `Slider_1` after the `Footer_holder` div) and position them with another CSS style. –  Oct 15 '19 at 11:25

1 Answers1

1

Well the "+" selector works only if you switch your divs position:

<div id='Footer_Holder'></div>
<div id='Slider_1'></div>

Here read all about the selectors: https://www.w3schools.com/cssref/css_selectors.asp

bill.gates
  • 14,145
  • 3
  • 19
  • 47