Question

我创建了一些东西，可以在使用onmouseover时将div放大。他们使用onmouseout缩小回正常大小。但是，出于某种原因，div被推倒并留在那里。这导致其中一个div开始出现故障。我怎样才能阻止div被推下来，但是div仍然会被放大并变得更小？的更新当我把它与我的其余代码放在一起时，它又发生了。 https://jsfiddle.net/pc65ve7b/

有人能帮助我吗？

＆＃13;

function enlarge(a, b, c, d) {
	  a.style.height = "375px";
	  b.style.height = "0px";
	  c.style.height = "0px";
	  d.style.height = "0px";
	};

	function shrink(a, b, c, d) {
	  a.style.height = "125px";
	  b.style.height = "125px";
	  c.style.height = "125px";
	  d.style.height = "125px";
	};

＆＃13;

.thing {
  height: 125px;
  width: 250px;
  z-index: 10;
  position: relative;
  border: 5px solid brown;
}
.aside {
  border: 5px solid black;
  overflow:hidden;
}

＆＃13;

<aside class="aside">
  <div id="c1"></div>
  <div class="thing" style="background-color: blue;" id="c2" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: orange;" id="c3" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: pink" id="c4" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))"><h1>hello</h1></div>
</aside>

＆＃13;

Answer 1

我无法告诉你为什么会这样，但我可以给你两个修复：

1。使用类并切换它们，而不是直接操作style：

function enlarge(a, b, c, d) {
  a.classList.add("enlarge");
  b.classList.add("make-room");
  c.classList.add("make-room");
  d.classList.add("make-room");
  }

function shrink(a, b, c, d) {
  a.classList.remove("enlarge");
  b.classList.remove("make-room");
  c.classList.remove("make-room");
  d.classList.remove("make-room");
}

.thing {
  height: 125px;
  width: 250px;
  z-index: 10;
  position: relative;
  border: 5px solid brown;
}
.aside {
  border: 5px solid black;
}
.enlarge {
  height: 375px;
}
.make-room {
  height: 0px;
}

<aside class="aside">
  <div id="c1"></div>
  <div class="thing" style="background-color: blue;" id="c2" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: orange;" id="c3" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: pink" id="c4" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))"><h1>hello</h1></div>
</aside>

2。将height设置为""而不是特定值：

function enlarge(a, b, c, d) {
  a.style.height = "375px";
  b.style.height = "0px";
  c.style.height = "0px";
  d.style.height = "0px";
  }

function shrink(a, b, c, d) {
  a.style.height = "";
  b.style.height = "";
  c.style.height = "";
  d.style.height = "";
}

.thing {
  height: 125px;
  width: 250px;
  z-index: 10;
  position: relative;
  border: 5px solid brown;
}
.aside {
  border: 5px solid black;
}

<aside class="aside">
  <div id="c1"></div>
  <div class="thing" style="background-color: blue;" id="c2" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c3'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: orange;" id="c3" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c4'))"><h1>hello</h1></div>
  <div class="thing" style="background-color: pink" id="c4" onmouseover="enlarge(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))" onmouseout="shrink(this, document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'))"><h1>hello</h1></div>
</aside>

Answer 2

主要问题是您设置的b.style.height = "125px"; <div id="c1"></div>高度为125px。

所以只需像这样更改shrink函数：

function shrink(a, b, c, d) {
  a.style.height = "125px";
  b.style.height = "0px";
  c.style.height = "125px";
  d.style.height = "125px";
};

这应该有用。

元素在扩大后被推倒

2 个答案: