0

I have a simple set up but I am not sure when I hover over the second div how to target the fist div. Below is an example I can't get the second div to target the first div on hover. Any help would be great. 

<div id="container">
  <div id="one">Some text.</div>
  <div id="two">Some more text.</div>
</div>

#container #two {
  width: 50vw;
}

#container #two:hover {
  width: 90vw;
}

#container #two:hover + #one {
  width: 10vw;
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
user2751645
  • 65
  • 1
  • 9
  • 1
    It does — not — work in this direction. – deEr. Apr 24 '18 at 16:04
  • try this for your css `#container { display: flex; } #one, #two { background: red; flex: 1; text-align: center; transition: all .2s; padding:20px; } #two { background: green; } #one:hover, #two:hover { flex: 5; }` – Matt Apr 24 '18 at 16:16
  • I saw you added jquery as tag, you can bind [JQuery .hover()](https://api.jquery.com/hover/) to implement this. like `$( "#two" ).hover( function() { $( this ).addClass( "hover" ); }, function() { $( this ).removeClass( "hover" ); } );` – Sphinx Apr 24 '18 at 16:20
  • @Matt `#container #two:hover + #one { width:10vw;}` should be '#container #two:hover + #one { right:-40vw;}' I was messing with flex but could not get that to work. Any other suggestions? I in my code I am using two background images. – user2751645 Apr 24 '18 at 16:41

0 Answers0