JS OnMouseOver-Event (DIV2) change BackgroundImage (DIV1)

Question

i got a fullscreen-bg div which in my case got the ID #background-change.

In that fullscreen-bg i got 3 Divs called .fullscreen-column-1, .fullscreen-column-2 etc.

now i want to change the background-image of #background-change while the mouseoverevent is called on the columns.

My code looks like this, but it did not work.

<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>`

Here comes the 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>

any one got the solution? I cant get it to work, i feel dumb right now...

Solution: posted by: Rajan Patil

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

Possible duplicate of [Change background image on hover](https://stackoverflow.com/questions/18228248/change-background-image-on-hover) and a multitude of same answers found by searching SO. — Rob, Jul 11 '18 at 18:57
sorry but this is not helpful. You cant change the background of the parent div with css. css only works top down. not down top. — LenB, Jul 11 '18 at 19:00
Oh, I clicked on the wrong one. So I'll continue to do the work for you again: https://stackoverflow.com/questions/17881699/background-image-change-on-hover?s=3|128.6951 If that doesn't work. I'll do more work that you should be doing but I'll do for you. But if you are looking for an exact answer, you've come to the wrong place. — Rob, Jul 11 '18 at 19:04

score 0 · Answer 1 · edited Jul 11 '18 at 19:29

0

There is a typo. getElementsById should be getElementById

Also attach your event listener this way :

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

edited Jul 11 '18 at 19:29

Mittal Patel

2,732
14
23

answered Jul 11 '18 at 18:51

Rajan Patil

952
7
15

fixed that but did not help. – LenB Jul 11 '18 at 18:55
It is because when you call getElementsByClassName it returns an array-like object of all child elements which have all of the given class names. So when you want to attach an event listener to these elements, you need to run loop. See my edited answer. – Rajan Patil Jul 11 '18 at 19:18
Wow! Thank you. I did not think of that. I always thought of doing it wrong or maybe i was missing something in my code. – LenB Jul 11 '18 at 19:30

score 0 · Answer 2 · answered Jul 11 '18 at 18:53

0

You do not need JavaScript for this. Use CSS instead.

.fullscreen-column-1 {
  width: 400px;
  height: 1000px;
  background-image: url(https://picsum.photos/400/1000);
  transition: 0.2s ease-in-out;
}

.fullscreen-column-1:hover {
  background-image: url(https://picsum.photos/400/1002)
}

<div class="fullscreen-column-1"></div>

answered Jul 11 '18 at 18:53

Skylar Brown

3,234
2
14
7

i dont want to change the bg of the column i want to change the background of the parent fullscreen-bg div. – LenB Jul 11 '18 at 18:55

JS OnMouseOver-Event (DIV2) change BackgroundImage (DIV1)

2 Answers2