Question

我遇到了这样的问题：我想增加悬停的div宽度，同时他的兄弟姐妹的宽度减少。没有设置过渡属性，一切正常。

如果我设置过渡并快速移动鼠标。我的divs没有完全填满他们的父母。

这是我的代码：

＆＃13;

#parent {
  display: block;
  position: relative;
}
#parent .child {
  float: left;
  height: 300px;
  width: 20%;
  background-color: red;
  transition: width .5s;
}
#parent .child:nth-child(2) {
  background-color: grey;
}
#parent .child:nth-child(3) {
  background-color: green;
}
#parent .child:nth-child(4) {
  background-color: yellow;
}
#parent .child:nth-child(5) {
  background-color: brown;
}
#parent:hover .child {
  width: 17.25%;
}
#parent:hover .child:hover {
  width: 31%;
}

＆＃13;

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

＆＃13;

您有什么想法如何解决这个问题？我可以用纯CSS修复它，或者我应该使用javascript吗？

Answer 1

也许使用Flexbox可以让您获得更流畅的效果。

您可以根据需要调整flex属性以获得正确的尺寸。

＆＃13;

body,
html {
  /* for demo purposes */
  padding: 0;
  margin: 0;
}

#parent {
  display: flex;
}

#parent .child {
  height: 300px;
  flex: 1 1 auto;
  background-color: red;
  transition: all .5s;
}

#parent .child:nth-child(2) {
  background-color: grey;
}

#parent .child:nth-child(3) {
  background-color: green;
}

#parent .child:nth-child(4) {
  background-color: yellow;
}

#parent .child:nth-child(5) {
  background-color: brown;
}

#parent .child:hover {
  flex: 2 1 auto;
}

＆＃13;

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

＆＃13;

多个divs宽度转换，父级填充100％

1 个答案: