Mouseover troubles for full width divs

I have 3 skewed divs and i am trying to have one of them take up the full width of the container. The code i have for the html, css, and JS are below please give me hints on how to complete it and not just answers please.

<section class="cars">
      <div class="car"></div>
      <div class="car"></div>
      <div class="car"></div>


  margin: 0;

  width: 100%;
  height: 500px;

 width: 33.333333%;
 height: 100%;
 background: #3498db;
 position: relative;
 -webkit-transform: skewx(-10deg);
 -moz-transform: skewx(-10deg);
 -o-transform: skewx(-10deg);
 -ms-transform: skewx(-10deg);
 transform: skewx(-10deg);
 transform-origin: top left;
 float: left;
 display: inline;

.car:nth-child(2) {
  background: #000

.car:nth-child(3) {
  background: #ff0000


document.addEventListener('DOMContentLoaded', function(){
  let cars = document.querySelector('.cars');
  let carArr = cars.querySelectorAll('.car');
  let delta = 0;

cars.addEventListener('mouseover', function(e){
  for(let i = 0; i < carArr.length; i++){
    delta = (e.clientX - window.innerWidth / 2) * 0.5;


What do you mean full width of container? Like, one on top, the other two beneath and splitting the width between them? If so, nth-of-type will do that.

Btw, it would be easier to help if you put the stuff in a codepen and gave the link.

Sorry i should’ve been more clear. Oh i dont have a codepen only github but ill make one. And as by width i mean if you mouseover one div it takes over the full width of the parent container. Since the divs occupy 33% of the parent container. I want the div that i mouseover to take up the full width of the parent container.

Hope this helps

cool, I’d probably use JS to toggle a class when you mouseover the div. Get the div with, probably give each one an id. The extra class or toggled class has a width or 100%. Maybe put them all in a flex container with flex-wrap: wrap so the other ones will go to the next line. Something like that?

okay i will try that out.

Here is the codepen i hope i got the correct link and everything

I edited your post just to fix the JS code box.

Anyway, what should happen to the other divs when one is made 100% width?

they should just disappear. Similar to their width becoming 0 or having their z-index lowered.

And thank you i noticed that i did it wrong im sorry :frowning:

So i tried your solution and its not quite what i wanted. They should be side by side and when you mouseover one div that div expands the full with of the parent container.

ah, I see. Maybe when you click on the one you want larger, add a class that sets its flex-basis to 100% and simultaneously sets the others to 0? Then hopefully they will disappear.