Question

目前，我正在尝试创建nextflix克隆。我的问题是，当我将鼠标悬停在一个电影盒上时，它会扩展，但也会将其他电影盒向下推，并且只会向一个方向扩展。不知道如何解决此问题。提前致谢。

html

    <div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

css

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  transition: .5s;
}

.box:hover{  
  height: 200px;
  width: 200px;
}

https://codepen.io/shauneb/pen/Epoxrx //我面临的问题的示例

Answer 1

您只需要在.box类中添加vertical-align：top css即可。

Answer 2

我刚刚将您的过渡替换为transform: scale(2); 并使用vertical-align:middle;

将框居中对齐

希望这可能有用。

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  text-align:center;
  margin-bottom: 50px;
/*   position: absolute; */
  display: inline-block;
  transition:transform .5s ease;
  vertical-align: middle;
}

.box:hover{
  
 transform: scale(2); 
  margin-top: 50px;
  margin-bottom: 50px;
}

<div class="wrapper">
  <div class="box">Movie 1</div>
  <div class="box">Movie 2</div>
  <div class="box">Movie 3</div>
  <div class="box">Movie 4</div>
</div>

Answer 3

如果只想沿一个方向（垂直）推动它，则只需更改元素的高度而不是宽度，并且使用display: inline-block也会导致推动其他元素。

因此您的样式应为：

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
  display: block;
  float: left;
  margin-left: 10px;
  transition: .5s;
}

.box:hover{
  height: 200px;
}

Answer 4

将此样式用于.box

.box{
    height: 100px;
    width: 100px;
    background-color: blue;
    display: block;
    transition: .5s;
    float: left;
    margin: 50px 0px 50px 10px;
}

如果使用此悬停效果，将获得以下输出：

.box:hover{  
  height: 200px;
  width: 200px;
}

如果使用此悬停效果，将获得以下输出：

.box:hover{  
   transform: scale(1.3);
}

Answer 5

我不知道这是否是您想要的，但是，您可以使用CSS来修改块的大小，而无需使用transform：scale（2）;在悬浮css中。

缩放可将元素调整为查看器的大小，但元素的“体积”保持不变，因此不会移动另一个div

使用比例修改示例：

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
/*   position: absolute; */
  display: inline-block;
  transition: .5s;
}

.box:hover{
  z-index: 1;
  transform: scale(2);
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box" style="background-color: green"></div>
  <div class="box" style="background-color: violet"></div>
  <div class="box"  style="background-color: red"></div>
</div>

注意：我还添加了一个位置：相对于盒子和z-index的位置，以确保您要悬停的元素始终位于其他元素的顶部。

https://codepen.io/ancode/pen/pZpJRN

尝试使div框扩展

5 个答案: