html - CSS mouse hover fallthrough -

i have 2 text element, , when mouse hover middle of them, need both mouse hover events triggered. code:

div {    position: absolute;  }  .div1 {    display: block;    background: red;    -webkit-transition: left 2s;    transition: left 2s;    left: 10px;  }  .div2 {    display: block;    background: green;    transition: left 2s;    left: 50px;  }  .div1:hover {    left: 100px;  }  .div2:hover {    left: 0px;  }

<div class="div1">paifjopweijfopaiwjef</div>  <div class="div2">fpaowiejfoaweafjweoi</div>

when mouse enter overlap region of 2 elements, want trigger both transitions. second div transition working, first 1 doesnt work. seems mouse hover event not "fall through". how can trigger both?

do this:

div {      position: absolute;  }  .div1 {      display: block;      background: red;      -webkit-transition: left 2s;       transition: left 2s;      left: 10px;  }  .div2 {      display: block;        background: green;      transition: left 2s;      left: 50px;  }    .parent:hover .div1{      left: 100px;  }  .parent:hover .div2{      left: 0px;  }

<div class="parent">    <div class="div1">paifjopweijfopaiwjef</div>    <div class="div2">fpaowiejfoaweafjweoi</div>  </div>