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

Question

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

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

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

здесь рабочий пример jsfiddle working example

<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'); 
    }); 
}); 

Answer 1

Flex путь:

http://jsfiddle.net/coma/xWc45/3/

div.foo { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
} 

div.foo > div { 
    flex: 1; 
    height: 200px; 
    background-color: #000; 
    transition: flex 350ms; 
} 

div.foo > div:hover { 
    flex: 10; 
} 

div.foo > div:nth-child(1) { 
    background-color: #f00; 
} 

div.foo > div:nth-child(2) { 
    background-color: #0f0; 
} 

div.foo > div:nth-child(3) { 
    background-color: #00f; 
} 

Другой способ:

http://jsfiddle.net/coma/xWc45/1/

div.foo:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

div.foo > div { 
    float: left; 
    width: 25%; 
    height: 200px; 
    background-color: #000; 
    transition: width 350ms; 
} 

div.foo:hover > div { 
    width: 5%; 
} 

div.foo:hover > div:hover, 
div.foo:hover > div:last-child 
{ 
    width: 85%; 
} 

div.foo:hover > div:hover ~ div 
{ 
    width: 5%; 
} 

Answer 2

это проще в использовании, чем CSS JQuery ... вы можете использовать «парить» для эффекта ... вот пример ..

для каждого деления с заданием ширины вы хотите изменить в ..

.the name of first inner div:hover { 
width:20px; 
transition:1000ms; 
} 

Я использовал ': hover' после имени div .. и вы можете указать ширину, в которой вы хотите, чтобы div был изменен при зависании .. и 'переход: 1000 мс;' используется для медленного эффект перехода на движение .. вы можете изменить значение до 500, если хотите ... надеюсь, что это помогло ...

как мудрый, используйте эту опцию для каждого div ... и вам хорошо идти :)