javascript - 如何增加类里面某些东西的大小，而不是类里面其他元素的大小？

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>