скользящий div при наведении курсора

У меня есть для divs, заключенных в основной div. Родительский div имеет ширину 100%, другие коробки имеют равную ширину, таким образом, 25%. при наведении указатель на div должен быть шире, другие 3 divs одинаково изменяются до меньшего размера.

Он довольно работает, только когда я наводил курсор на определенные точки на краях родительского div, последний div проскальзывает вниз. (правые верхние углы или другие точки)

Я не могу найти выход: (был бы очень рад, если бы получил какую-то помощь от вас.

здесь приведен рабочий пример рабочего примера jsfiddle

<div class="outer_box">
    <div class="inner_box a">
        <div class="overflow"></div>
        <div class="content"></div>
    </div>
    <div class="inner_box b">
        <div class="overflow"></div>
        <div class="content"></div>
    </div>
        <div class="inner_box c">
        <div class="overflow"></div>
        <div class="content"></div>
    </div>
    <div class="inner_box d">
        <div class="overflow"></div>
        <div class="content"></div>
    </div>
</div>

.outer_box{
    width:100%;
    height:200px;
    outline:1px solid red;
    overflow:hidden;
}
.inner_box {
    float: left;
    height: 200px;
    width: 25%;
    transition: all 500ms ease;
    position:relative;
    background:black;
     -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    outline:1px solid white;
}
.first {clear: left;}
.a{background:yellow;}
.b{background:red;}
.c{background:blue;}
.d{background:green;}

.inner_box.hover {  width: 30%;   }
.inner_box.sliding {  width: 23.3%; }

$(document).ready(function(){
    $('.inner_box').hover(function(){
        //alert('yes');
        $(this).addClass('hover');
        $('.inner_box:not(.hover)').addClass('sliding');

    }, function() {
        $(this).removeClass('hover');
        $('.inner_box').removeClass('sliding');
    });
});