When the mouse hovers over DIV2, the background image of DIV1 will be replaced

I have a full-screen background div with the ID #background-change.

Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc.

My goal is to change the background image of #background-change when the mouseover event is triggered on the columns.

Although this is how my code looks, unfortunately it doesn't seem to be working as expected.

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

Below is the JavaScript code:

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

Does anyone have a solution? I'm struggling to get it to work and feeling frustrated...

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

Answer №1

Achieving the desired effect without JavaScript is possible by leveraging CSS. 

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

Answer №2

Our document contains a typo error in the code snippet where getElementsById should be written as getElementById

Moreover, remember to add your event listener using the following method:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restarting the timer in JavaScript

How can I reset the countdown timer every time a user types into an input field? I tried using clearTimeout but it doesn't seem to work. Can anyone help me with my existing code instead of providing new code? DEMO: http://jsfiddle.net/qySNq/ Html: ...

javascriptjquery

WebAPI provides a similar functionality to an array in JavaScript through the use of IQueryable

I have a WebAPI method that returns an IQueryable of a 'complex' object in the following format: [Route("api/INV_API/deptSelect")] public IQueryable<DEPTNAME_DESCR> GetDistinctDeptSelect([FromUri] string q) { if (q != null) ...

javascriptasp.netajaxasp.net-web-api2

transferring information to d3.js

I have a json object structured in the following way { "tweet":[ {"text": "hello world"}, {"text": "hello world"} ] } When I check the console output of "data" in my code below, it shows me an Object tweet: Array[131]. However, when I l ...

javascriptjsond3.js

Retrieve the data entered in the submit button field

My question concerns a form with two buttons: <form method="post" action=""> <button type="submit" name="age" value="20">Age 20</button> <button type="submit" name="age" value="30">Age 30</button> </form> When ...

javascriptjqueryhtmlajaxserialization

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

javascriptangulartypescript

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

Error: 'require is not defined' pops up while trying to import into App.js for a React App built with CDN links

My latest project involves a React App that showcases an h1 tag saying "Hello World" on the browser. Rather than utilizing npm, I have opted for CDN links to set up the application. The structure of the App consists of three key files: An index.html file ...

javascripthtmlreactjsbabeljs

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...

javascriptcssreactjsmaterial-ui

How to prevent page refresh when hitting enter in jQuery form?

Currently, my form does not refresh the page when I click the button to submit it. However, if I press Enter while a text input is selected, the page will refresh. Is there a way to make pressing Enter on the text input perform the same action as clicking ...

javascriptphpjqueryhtmlajax

What is causing the TypeError when trying to set a property on undefined in AngularJS?

I've taken on the challenge of building a microblog app to learn more about angularJS. One thing that's really getting me is trying to understand the differences between service, factory, and provider. After some research, I decided to go with s ...

javascriptweb-applicationsangularjs

Are third-party scripts and HTML widgets able to replicate your website's data, including cookies, HTML, and other elements?

Currently, I am in the process of constructing a website that incorporates a third-party weather HTML widget. The widget is sourced from a trusted and reliable source on the web. It consists of a link and small JavaScript tags that are executed once loaded ...

javascripthtmlsecurityweb

The best way to organize and position a Label and TextBox in C#

I need help styling the aspx file. The Label and TextBox elements are not aligned properly. I want the Label and TextBox to be positioned side by side with appropriate spacing. <div class="col-md-12"> <p> ...

c#cssasp.net

How to create a calendar selection input using PHP?

Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: I want to create a feature where selecting a month will aut ...

javascriptphpjqueryhtmldate

Utilizing arrays in the label field of Chart.js

Creating a straightforward bar chart using Chartjs 3.x The process involves fetching JSON data from the server, parsing it, and storing specific parts in arrays. See the code snippet below: serverData = JSON.parse(http.responseText); console.log(serverDa ...

javascriptchart.js

Having issues with regEX functionality in an Angular form

I need to validate a phone number using regEX. My criteria is as follows: 10 digits alpha/numeric, where an Alpha CHAR is in the 4th position (excluding hyphens). For example: 586R410056  NNN ANN NNNN  (NNN) ANN NNNN  NNN-ANN-NNNN  (NNN) AN ...

javascriptangularjsregex

When attempting to add mp3 files to a Vue/TypeScript application, a "Module not found" error is triggered

I am encountering an error while trying to import .mp3 files into my Vue/Typescript app. Upon running 'npm serve', I am presented with the following message: ERROR in /Users/***/***/application/src/components/Sampler.vue(80,16): 80:16 Cannot fin ...

javascripttypescriptvue.js

difficulty with displaying the following image using jquery

I have referenced this site http://jsfiddle.net/8FMsH/1/ //html $(".rightArrow").on('click',function(){ imageClicked.closest('.images .os').next().find('img').trigger('click'); }); However, the code is not working ...

javascriptjquerycsshtml

Yelp API call resulting in an 'undefined' response

When attempting to make an API call using the yelp-fusion, I noticed that the logged result is showing as undefined. It seems like this issue might be related to promises or async functions. It's important for me to maintain this within a function sin ...

javascripttypescripthttpfetchyelp

Lifting Formik's "dirty" value/state to the parent component: A step-by-step guide

Parent Component const Mother = () => { const [dusty, setDusty] = useState(false) return ( <ChildComponent setDusty={setDusty} /> ) } Child.js ... <Formik initialValues={initialValues} onSubmit={onSubmitHandler} validationSchema={sch ...

javascriptreactjsformik