백그라운드 hover 채택완료

1-4번으로 나눠져있지만 백그라운드 이미지는 통으로 가득차게 나오게 하고싶구요.

1번에 마우스 오버시 1번에 지정해두었던 백그라운드 이미지가 나오고(1-4번영역 통이미지로)

2번에 마우스 오버시 2번에 지정해두었던 백그라운드 이미지가 나오고

3번에 마우스 오버시 3번, 4번에 마우스 오버시 4번 백그라운드이미지가 나오게 하고 싶어요.

이렇게 되면 section id에 지정된 백그라운드 이미지만 나오게 되는데..

어떤 걸 추가해야 아래 지정된 자바스크립트 소스가 적용이 될까요?

section class명을 변경되게끔 해줘야하는거같은데 어떻게 해야할지 모르겠습니다ㅠㅠㅠ

아래는 다른곳 찾아서 소스적용시켜본거에요ㅠㅠ

이렇게 전달드리면 확인이 어려우실까요?ㅠㅠ

필요하신 추가정보 있으심 말씀해주세요~

아무리봐도 답이 안나와서 요청드려요~

<div class="idx_row">
                    <section id="fg-container" class="fg-container-bg" style="background-image: url('07.png');">
                        <div class="main-top-hover pro01" id="project-01">
                            <div class="bg-overlay"></div>
                            <div class="main-content-body">
                                <h5 class="main-minititle">1</h5>
                            </div>
                        </div>
                        <div class="main-top-hover pro02" id="project-02">
                            <div class="bg-overlay"></div>
                            <div class="main-content-body">
                                <h5 class="main-minititle">2</h5>
                            </div>
                        </div>
                        <div class="main-top-hover pro03" id="project-03">
                            <div class="bg-overlay"></div>
                            <div class="main-content-body">
                                <h5 class="main-minititle">3</h5>
                            </div>
                        </div>
                        <div class="main-top-hover pro04" id="project-04">
                            <div class="bg-overlay"></div>
                            <div class="main-content-body">
                                <h5 class="main-minititle">4</h5>
                            </div>
                        </div>
                    </section>
                </div>

                <script type="text/javascript">
                    var 01Div = wrap.getElementsByClassName("pro01")[0];
                    var 02Div = wrap.getElementsByClassName("pro02")[0];
                    var 03Div = wrap.getElementsByClassName("pro03")[0];
                    var 04Div = wrap.getElementsByClassName("pro04")[0];
                    var bDiv = wrap.getElementsByClassName("fg-container-bg")[0];
                    01Div.onmouseover = function() {
                        bDiv.style.backgroundImage = "url('01.png')";
                    };
                    01Div.onmouseout = function() {
                        bDiv.style.backgroundImage = "url('01.png')";
                    };
                    02Div.onmouseover = function() {
                        bDiv.style.backgroundImage = "url('07.png')";
                    };
                    02Div.onmouseout = function() {
                        bDiv.style.backgroundImage = "url('07.png')";
                    };
                    03Div.onmouseover = function() {
                        bDiv.style.backgroundImage = "url('10.jpg')";
                    };
                    03Div.onmouseout = function() {
                        bDiv.style.backgroundImage = "url('10.jpg')";
                    };
                    04Div.onmouseover = function() {
                        bDiv.style.backgroundImage = "url('04.png')";
                    };
                    04Div.onmouseout = function() {
                        bDiv.style.backgroundImage = "url('04.png')";
                    };
                </script>