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/

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

1 个答案: