확대 후 요소 푸시

Question

onmouseover을 사용하여 divs를 올리면 div를 확대하는 무언가를 만들었습니다. 그들은 onmouseout을 사용하여 정상 크기로 축소합니다. 그러나 어떤 이유에서 div가 밀려 내려와 있습니다. 이로 인해 div 중 하나가 글리치 시작합니다. div가 아래로 밀리는 것을 어떻게 막을 수 있습니까? 그렇지만 div가 확대되고 더 작아 지도록하려면 어떻게해야합니까? 업데이트 다른 코드와 함께 사용하면 다시 발생합니다. https://jsfiddle.net/pc65ve7b/

누군가 나를 도와 줄 수 있습니까?

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

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

.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 1

이 일어나고 왜 당신을 말할 수는 없지만, 내가 당신에게 두 가지 수정 사항을 제공 할 수 있습니다 : 오히려 직접 style를 조작하는 것보다, 그들을

1. 클래스와 전환 :

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

변경했다 :

당신의 shrink 방법

b.style.height = "0px"; 

거기 당신은 간다!

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>

그것을 확인하고 나를 귀하의 의견을 알려주세요. 감사!

Answer 3

가장 큰 문제는 의 높이가 125px 인 b.style.height = "125px";을 설정했기 때문입니다.

그래서 그냥이처럼 shrink 기능을 변경 :

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

이 작동합니다.