滑動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%; 
} 

Answer 2

它更容易使用的CSS比jQuery的...你可以使用效果的「懸停」 ......這裏有一個例子..

每個DIV指定要調整的寬度..

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

我在div的名稱後面加了'：hover'，你可以指定寬度，當你想要div被重新調整大小的時候，humor ...和'transition：1000ms;'用於慢動作過渡效果..你可以，如果你喜歡的值更改爲500 ... 希望這有助於...

像明智的，使用此選項爲每個格...你是好去:)