Question

我有主div中包含的div。父div为100％宽，其他盒子宽度相等，因此为25％。在悬停时，div徘徊应该变得更宽，其他3个div同样调整到更小的尺寸。

这是非常有效的，只有当我将鼠标悬停在父div的边缘上的某些点上时，最后一个div才会滑落。（右上角或其他点）

我无法找到出路:( 如果我能得到你的帮助，我将非常高兴。

<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

使用css比使用jquery更容易......你可以使用'hover'来表示效果......这是一个例子..

每个div的

指定要调整大小的宽度..

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

我在div的名称之后使用'：hover'。你可以指定你想要在悬停时重新调整div的宽度..和'transition：1000ms;'用于慢动作过渡效果..如果您愿意，可以将值更改为500 ... 希望这有帮助...

同样明智的，对每个div使用此选项......你很高兴：）

Answer 2

灵活方式：

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

在悬停时调整滑动div调整大小

2 个答案: