javascript - select previous element and apply effect using css -

i have 3 <div>s in 1 horizontal line. each width = 33.33% , want change width of 1 div on hover 50% , other 2 25%.

<div id="a"></div> <div id="b"></div> <div id="c"></div> 

i can apply as

#a:hover{width:50%} #a:hover+#b {width:25%} #a:hover~#c {width:25%} 

and work fine.

when hover b

#b:hover{width:50%} #b:hover+#a {width:25%} #b:hover~#c {width:25%} 

b expand 50% , c shrink 25%. #a remain 33.33%.

how can fix this.

flexbox can without parent selctor:

* {    box-sizing: border-box;  }  .parent {    width: 80%;    margin: 1em auto;    display: flex;  }  .child {    height: 150px;    border: 1px solid grey;    flex: 1;    transition: flex 1s ease;  }  .child:hover {    flex: 0 0 50%;  }

<div class="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>