Question

我遇到了这个问题。我有5列div彼此相邻浮动。当悬停在它上面时，悬停的div应该通过动画扩展其宽度。到目前为止我覆盖了那个部分，但我的问题是当我悬停那个div时，最后一个div出现在底部（意味着它超过100％宽度容器）我不知道如何解决这个问题而不会阻止超过100％的容器。

这是我到目前为止所做的事情：

jsfiddle

＆＃13;

$(document).ready(function() {
  var boxWidth = $(".box").width();
  $(".box").mouseenter(function() {
    $(this).animate({
      width: "30%"
    });
  }).mouseleave(function() {
    $(this).animate({
      width: boxWidth
    });
  });
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.box {
  height: 100vh;
  width: 20%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="background:red"></div>
<div class="box" style="background:grey"></div>
<div class="box" style="background:yellow"></div>
<div class="box" style="background:green"></div>
<div class="box" style="background:#000000"></div>

＆＃13;

Answer 1

如果你喜欢flex，那么就这样做：

body {
    margin:0;
    padding:0;
}
.boxes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
.box {
    height: 100vh;
    flex: 1 1 auto;
    transition: flex-grow .3s ease-in-out;
}
.box:hover {
    flex-grow: 1.5;
}

<div class="boxes">
    <div class="box" style="background:red"></div>
    <div class="box" style="background:grey"></div>
    <div class="box" style="background:yellow"></div>
    <div class="box" style="background:green"></div>
    <div class="box" style="background:#000000"></div>
</div>

flex here的精彩指南。

JSFiddle上的相同代码。

Answer 2

如果将一个div的宽度更改为30％，则其他div需要缩小到17.5％（70％/ 4）宽度。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrap {
 background:black;
 overflow:hidden;
}

.wrap .box {
  height: 100vh;
  width: 20%;
  float: left;
  transition:width .25s ease;
}

.wrap:hover .box:hover {
  width: 30%;
}
.wrap:hover .box {
  width: 17.5%;
}

<div class="wrap">
    <div class="box" style="background:red"></div>
    <div class="box" style="background:grey"></div>
    <div class="box" style="background:yellow"></div>
    <div class="box" style="background:green"></div>
    <div class="box" style="background:#000000"></div>
</div>

动画在100％宽度容器内的div

2 个答案: