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

假设我在一个div中有四个图像，它们的宽度都是5.5%

[uu o_uuo_uo_uo_u]

我想使用javascript更改鼠标悬停的目标，并使其如下所示：

[uu o_uuo_uo_uo_u]

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

[[u o_uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

我不知道如何让其他元素留在原地，而不是被推

问题是，是的，我能够成功地改变宽度。 但是改变一个元素的宽度会将周围的元素推到相应的右侧和左侧。

---

jsbin:

正如我刚才所解释的，您需要设置一个更高的z索引，使其“高于”非悬停框。并设置负的左右边距，相当于悬停时的额外宽度，以防止所有东西四处移动

下面是一个使用百分比的工作示例

正文{
宽度：300px；
高度：100px；
}
.myClass{
宽度：20%；
身高：50%；
位置：相对位置；
z指数：1；
浮动：左；
}
.myClass:悬停{
宽度：30%；
身高：70%；
z指数：10；
利润率：0-5%；
}
body.myClass:第n个孩子（1）{
背景色：红色；
}
body.myClass:第n个孩子（2）{
背景颜色：绿色；
}
body.myClass:第n个孩子（3）{
背景颜色：蓝色；
}
body.myClass:第n个孩子（4）{
背景颜色：黄色；
}

---

您可以使用flexbox进行此操作：

.wrapper{
显示器：flex；
显示：-webkit flex；
显示：-moz flex；
宽度：400px；
背景色：红色；
}
.项目{
位置：相对位置；
宽度：25%；
高度：200px；
}
.圆圈{
位置：绝对位置；
底部：20px；
左：50%；
-webkit转换：翻译（-50%，-50%）；
背景：白色；
宽度：20px；
高度：20px；
边界半径：50%；
过渡：全部3秒；
}
.item1{背景色：蓝色；}
.item2{背景色：红色；}
.item3{背景色：橙色；}
.item4{背景色：黄色；}
.项目：悬停.圆圈{
背景色：黑色；
高度：40px；
宽度：40px；
}

我意识到我可以用hover来实现这一点，但我选择不这样做，因为我依赖于要实现到其他javascript函数中的更改。您的回答没有解决我遇到的问题。您需要使用

onmouseover

事件来触发javascript函数。和

onmouseout

来重置样式。我意识到了这一点——再一次，这不是我要讨论的问题。使用onmouseover不是问题，问题在于css。我可以成功地将宽度从5.5%更改为9%，效果很好，但其他元素也因此改变了位置，这似乎是css的问题。这就是为什么在hover上我添加了一个负边距，以补偿大小的增加，而不影响其他图像。因此，建议的CSS应该可以解决您的问题，只是您不需要

.myClass:hover

案例，因为您使用javascript处理样式。更改边距无助于显示您拥有的代码。。。使用jsbin或jsfiddle我的代码不会在jsfiddle上运行，因为我依靠for循环来更改我的本地图片，这些图片是img1、img2、img3等。只需使用标语牌图片，比如当鼠标悬停在红色/橙色上时，其他三个图片不是变小了，边也会向外移动。确切地说，^当我将鼠标移到红色元素上时，我需要其他三个图片保持不变，例如，橙色框的右边缘向右移动。我希望它保持不变