html - JavaScript issue with animating elements on hover -

i'm having slide in menu, contains 3 elements (div's), idea each 1 on hover expands width 33% 60, while @ same time other 2 shrink 20%, therefore 100% never exceeded.

two issues having right now:

1. on fast mouse move element 1 element 3, screen starts behave funny, flickers hover on element 2 being called (because mouse goes on element 2 element3), , results in blank space , overflow second or two, until hover function on element 3 takes place.

   • i tried stopping using timeout function, must not solution, did not work

2. once hover off container, hover on element 1, last hovered time, stays @ 60%, , not return. not quite sure set behavior. on hover of element , check, or mouseout, idk.

the code..

html

<div id="elem1" onmouseover="focusdiv('elem1')">    <div style="position: relative; top: 50%; left: 0">e1</div> </div>  <div id="elem2" onmouseover="focusdiv('elem2')">    <div style="position: relative; top: 50%; right: 0">e2</div> </div>  <div id="elem3" onmouseover="focusdiv('elem3')">    <div style="position: relative; top: 50%; right: 0">e3</div> </div> 

js function

function focusdiv(menuitem) {  var nameone = 'elem1'; var nametwo = 'elem2'; var namethree = 'elem3';  if (menuitem == nameone){     var main = document.getelementbyid("elem1");     var siblingone = document.getelementbyid("elem2");     var siblingtwo = document.getelementbyid("elem3"); } else if (menuitem == nametwo){     var main = document.getelementbyid("elem2");     var siblingone = document.getelementbyid("elem1");     var siblingtwo = document.getelementbyid("elem3"); } else if (menuitem == namethree){     var main = document.getelementbyid("elem3");     var siblingone = document.getelementbyid("elem2");     var siblingtwo = document.getelementbyid("elem1"); } else {     console.log('something wrong'); };  if(hoveractive || (siblingone.style.width == "59%" || siblingtwo.style.width == "59%")){     if(siblingone.style.width == "59%"){          siblingone.style.webkitanimation = "return-large-width 1s 1 ease-in-out";         siblingone.style.animation = "return-large-width 1s 1 ease-in-out";         siblingone.style.width = "20%";          main.style.webkitanimation = "expand-large-width 1s 1 ease-in-out";         main.style.animation = "expand-large-width 1s 1 ease-in-out";         main.style.width = "59%";      } else if (siblingtwo.style.width == "59%"){          siblingtwo.style.webkitanimation = "return-large-width 1s 1 ease-in-out";         siblingtwo.style.animation = "return-large-width 1s 1 ease-in-out";         siblingtwo.style.width = "20%";          main.style.webkitanimation = "expand-large-width 1s 1 ease-in-out";         main.style.animation = "expand-large-width 1s 1 ease-in-out";         main.style.width = "59%";      }  } else {     main.style.webkitanimation = "expand-width 1s 1 ease-in-out";     main.style.animation = "expand-width 1s 1 ease-in-out";     main.style.width = "59%";      siblingone.style.webkitanimation = "shrink-width 1s 1 ease-in-out";     siblingone.style.animation = "shrink-width 1s 1 ease-in-out";     siblingone.style.width = "20%";      siblingtwo.style.webkitanimation = "shrink-width 1s 1 ease-in-out";     siblingtwo.style.animation = "shrink-width 1s 1 ease-in-out";     siblingtwo.style.width = "20%";     hoveractive = true; } 

}

and css animations

@keyframes expand-width {     { width: 33%;}     {width: 59%;} }  @keyframes expand-large-width {     { width: 20%;}     {width: 59%;} }  @keyframes shrink-width {     { width: 33%;}     {width: 20%;} }  @keyframes return-width {     { width: 59%;}     {width: 33%;} }  @keyframes return-large-width {     { width: 59%;}     {width: 20%;} } 

tryng synchronize different changes quite difficult.

much better change approach radically: use flex autoadjust non-hovered items

.container {    display: flex;    border: solid 1px green;    width: 100%;    height: 100px;   }  .test {    flex: 33% 1 1;    background-color: lightgreen;    margin: 10px;    transition: flex-basis 1s 0.3s;   }    .test:hover {    flex-basis: 60%;    }

<div class="container">  <div class="test"></div>  <div class="test"></div>  <div class="test"></div>  </div>