JS OnMouseOver-Event (DIV2) изменить BackgroundImage (DIV1)

У меня есть полноэкранный div, который в моем случае получил ID # background-change.

В этом fullscreen-bg я получил 3 Div с именами .fullscreen-column-1, .fullscreen-column-2 и т. д.

теперь я хочу изменить фоновое изображение # background-change, пока mouseoverevent вызывается в столбцах.

Мой код выглядит так, но он не сработал.

<div id = "background-change" data-midnight = "dark" data-bg-mobile-hidden = "" class = "wpb_row vc_row-fluid vc_row full-width-content vc_row-o-full-height vc_row-o-columns-middle vc_row-o-equal-height vc_row-flex  vc_row-o-content-middle standard_section    first-section loaded" style = "padding-top: 0px; padding-bottom: 0px; margin-left: -298px; width: 1841px; visibility: visible; min-height: 96.7579vh;"><div class = "row-bg-wrap instance-0"><div class = "inner-wrap"> <div class = "row-bg    " style = "" data-color_overlay = "" data-color_overlay_2 = "" data-gradient_direction = "" data-overlay_strength = "0.3" data-enable_gradient = "false"></div></div> </div><div class = "col span_12 dark left" style = "min-height: 96.7579vh;">
<div class = "vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius = "none" data-shadow = "none" data-border-animation = "" data-border-animation-delay = "" data-border-width = "none" data-border-style = "solid" data-border-color = "#000000" data-bg-cover = "" data-padding-pos = "all" data-has-bg-color = "false" data-bg-color = "" data-bg-opacity = "1" data-hover-bg = "" data-hover-bg-opacity = "1" data-animation = "fade-in-from-left" data-delay = "500" style = "padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class = "column-link" href = "#"></a>
    <div class = "vc_column-inner">
        <div class = "wpb_wrapper">
            <h2 style = "font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class = "vc_custom_heading" id = "testid">About</h2>
        </div> 
    </div>
</div> 
<div class = "vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-1" data-border-radius = "none" data-shadow = "none" data-border-animation = "" data-border-animation-delay = "" data-border-width = "none" data-border-style = "solid" data-border-color = "" data-bg-cover = "" data-padding-pos = "all" data-has-bg-color = "false" data-bg-color = "" data-bg-opacity = "1" data-hover-bg = "" data-hover-bg-opacity = "1" data-animation = "" data-delay = "0">
    <div class = "vc_column-inner">
        <div class = "wpb_wrapper">
            <h2 style = "font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class = "vc_custom_heading">Work</h2>
        </div> 
    </div>
</div> 

<div class = "vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-2" data-border-radius = "none" data-shadow = "none" data-border-animation = "" data-border-animation-delay = "" data-border-width = "none" data-border-style = "solid" data-border-color = "" data-bg-cover = "" data-padding-pos = "all" data-has-bg-color = "false" data-bg-color = "" data-bg-opacity = "1" data-hover-bg = "" data-hover-bg-opacity = "1" data-animation = "" data-delay = "0" style = "min-height: 425px;">
    <div class = "vc_column-inner">
        <div class = "wpb_wrapper">

        </div> 
    </div>
</div> `<div class = "vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius = "none" data-shadow = "none" data-border-animation = "" data-border-animation-delay = "" data-border-width = "none" data-border-style = "solid" data-border-color = "#000000" data-bg-cover = "" data-padding-pos = "all" data-has-bg-color = "false" data-bg-color = "" data-bg-opacity = "1" data-hover-bg = "" data-hover-bg-opacity = "1" data-animation = "fade-in-from-left" data-delay = "500" style = "padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class = "column-link" href = "#"></a>
    <div class = "vc_column-inner">
        <div class = "wpb_wrapper">
            <h2 style = "font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class = "vc_custom_heading" id = "testid">About</h2>
        </div> 
    </div>
</div>`

А вот и js:

<script type = "text/javascript">
document.getElementsByClassName("fullscreen-column-1").onmouseover = function() {
    document.getElementById("background-change").style.backgroundImage = "url('https://mywebsite.de/uploads/image-1.jpg')";
};
</script>

у кого-нибудь есть решение? Я не могу заставить его работать, я чувствую себя тупым прямо сейчас ...

Решение: Автор: Раджан Патил

for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
  document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
      document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
    }
  }