morgan morgan - 3 months ago 7
CSS Question

Elements pushed down after enlargement

I have created something that enlarges divs when they are hovered on. Using onmouseover attribute. It then shrinks back to its normal size using onmouseout. But, for some reason the divs are pushed down and stay there. This causes one of the divs to start glitching. How can I stop the divs from being pushed down but still have the divs being enlarged and becoming smaller?



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";
};

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

<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

Had to change:

b.style.height = "0px";

in your shrink method and there you go!

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 = "0px";
  c.style.height = "125px";
  d.style.height = "125px";
};
.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>

Check it out and let me know your feedback. Thanks!

Comments