title: JS OnMouseOver-Event (DIV2) change BackgroundImage (DIV1)
body: <p>i got a fullscreen-bg div which in my case got the ID #background-change.</p>
  
  <p>In that fullscreen-bg i got 3 Divs called .fullscreen-column-1, .fullscreen-column-2 etc.</p>
  
  <p>now i want to change the background-image of #background-change while the mouseoverevent is called on the columns.</p>
  
  <p>My code looks like this, but it did not work.</p>
  
  <pre><code>&lt;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;"&gt;&lt;div class="row-bg-wrap instance-0"&gt;&lt;div class="inner-wrap"&gt; &lt;div class="row-bg    " style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;div class="col span_12 dark left" style="min-height: 96.7579vh;"&gt;
  &lt;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);"&gt;&lt;a class="column-link" href="#"&gt;&lt;/a&gt;
      &lt;div class="vc_column-inner"&gt;
          &lt;div class="wpb_wrapper"&gt;
              &lt;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"&gt;About&lt;/h2&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;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"&gt;
      &lt;div class="vc_column-inner"&gt;
          &lt;div class="wpb_wrapper"&gt;
              &lt;h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading"&gt;Work&lt;/h2&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;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;"&gt;
      &lt;div class="vc_column-inner"&gt;
          &lt;div class="wpb_wrapper"&gt;
  
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt; `&lt;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);"&gt;&lt;a class="column-link" href="#"&gt;&lt;/a&gt;
      &lt;div class="vc_column-inner"&gt;
          &lt;div class="wpb_wrapper"&gt;
              &lt;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"&gt;About&lt;/h2&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p></p>
  
  <p>Here comes the js:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  document.getElementsByClassName("fullscreen-column-1").onmouseover = function() {
      document.getElementById("background-change").style.backgroundImage = "url('https://mywebsite.de/uploads/image-1.jpg')";
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>any one got the solution? I cant get it to work, i feel dumb right now...</p>
  
  <p><strong>Solution:</strong> posted by: Rajan Patil</p>
  
  <pre><code>for (i = 0; i &lt; 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')";
      }
    }
  </code></pre>