Question

假设我在div中有四个图像。它们的宽度都是5.5％

[_ o__o__o__o _]

我想使用javascript来更改被鼠标悬停的目标（悬停在上面），并让它看起来像这样：

[_ o__O__o__o _]

所以我让目标的宽度增加了然而它也会将其他元素推向一边，而不是停留在原地，所以更像是：

[_ o___O___o__o_]

我不知道如何让其他元素保持原样而不是被推动。

问题是，我成功地改变了宽度。但是改变一个元素的宽度会将周围的元素推向相应的左右。 jsbin：https://jsbin.com/zujutamazo/edit?html,css,js,output

Answer 1

您可以使用flexbox：

.wrapper {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
        width: 400px;
  background-color: red;
}

.item {
  position: relative;
  width: 25%;
  height: 200px;
}

.circle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all .3s;
}

.item1 { background-color: blue; } 
.item2 { background-color: red; } 
.item3 { background-color: orange; } 
.item4 { background-color: yellow; } 

.item:hover .circle{
  background-color: black;
  height: 40px;
  width: 40px;
}

<div class="wrapper">
	<div class="item item1">
       <div class="circle"></div>
    </div>
	<div class="item item2">
       <div class="circle"></div>
    </div>
	<div class="item item3">
       <div class="circle"></div>
    </div>
	<div class="item item4">
       <div class="circle"></div>
    </div>
</div>

Answer 2

正如我所解释的那样，你需要设置一个更高的z-index来“高于”非悬停的盒子。并设置负左右边距，相当于悬停时的额外宽度，以防止一切都在四处移动。

以下是一个有百分比的工作示例。

body {
        width: 300px;
        height: 100px;
     }
     
 .myClass {
    width: 20%;
    height: 50%;   
    position: relative;
    z-index: 1;
    float: left;
  }
  
  .myClass:hover {
    width: 30%;
    height: 70%;
    z-index: 10;
    margin: 0 -5%;
  }
  
  body .myClass:nth-child(1) {
    background-color: red;
  }
  
  body .myClass:nth-child(2) {
    background-color: green;
  }
  
  body .myClass:nth-child(3) {
    background-color: blue;
  }
  
  body .myClass:nth-child(4) {
    background-color: yellow;
  }

<html>
 <head>
 
 </head>    
 <body>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
</body>
</html>

如何在课堂上增加某些东西的大小，而不是课堂上的其他元素？

2 个答案: