转换div时如何阻止兄弟姐妹移动？

Question

我正在开发一个Javascript，当鼠标悬停时可缩放div。 问题在于，该div的兄弟姐妹在调整大小时会移动。 我知道为什么会发生这种情况，但我不知道如何阻止它。 我试图更改z-index，但它不会阻止其他索引的移动。

$(".medarbetareObjekt").mouseenter(function () {
$(this.getElementsByTagName("address")[0]).css("display", "inline");
$(this).css("background-color", "#f2f2f2");
$(this).css("font-weight", "100");
$(this).css("z-index", "1000");
$(this).css("width", "40%");
$(this).css("border-radius", "10px");
$(this.getElementsByTagName("img")[0]).css("width", "80%");
$(this.getElementsByClassName("img-circle")[0]).css("margin-top", "5px");
}).mouseleave(function () {
$("address").css("display", "none");
$(this).css("background-color", "transparent");
$(this.getElementsByClassName("img-circle")[0]).css("margin-top", "0px");
$(".medarbetareObjekt").css("font-weight", "300");
$(this).css("z-index", "10");
$(this).css("width", "20%");
$(this).css("border", "none");
$(this.getElementsByTagName("img")[0]).css("width", "100%");
});

因此，总而言之，如何在不影响其他div的情况下调整div的大小？

https://jsfiddle.net/mellquist/58jmo1au/31/

Answer 1

我添加了这个CSS。

.zoom {
  -webkit-transform:scale(2);
  -moz-transform:scale(2);
  transform:scale(2);
}

并修改您的脚本以添加这些行..

$(this).addClass("zoom")和$(this).removeClass("zoom")

另外，我从脚本和CSS中删除了很多转换，例如。 这样，我就以某种方式删除了图像下方的文本居中位置。 我会留给你麻烦解决

这是更新的小提琴https://jsfiddle.net/pokd8jv9/2/