jquery - 悬停时滑动 div 调整大小

Question

我有包含在主 div 中的 div。父 div 为 100% 宽，其他框具有相同的宽度，因此为 25%。悬停时，悬停的 div 应该变宽，其他 3 个 div 的大小同样调整为更小。

它非常有效，只有当我将鼠标悬停在父 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%;
}