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>