轉換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/