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

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Identifying the differences between a select2 dropdown and select2 multiselect: a guide

I currently have two different controls on my page: a select2 dropdown and a jquery multi value select Select2 Dropdown <select id="drp_me" class="select2-offscreen"> <option value="1">one</option> <option value="2">two</op ...

javascriptjqueryjquery-pluginsjquery-select2multi-select

The server nodejs is unable to recognize the dotenv file

This is my very first project with the MERN stack and I'm currently working on pushing it to GitHub. Since I am using Mongoose, I needed to protect the login credentials for my account. After some research, I discovered the solution of using a .env fi ...

javascriptnode.js

What are the steps to correctly implement async await in a standard sequence?

When I press the button onPress={() => Login()} First, I need to obtain a token by using the signInWithKakao function. Secondly, right after acquiring the token, if it is available, I want to dispatch the profile using the kakaoprofile function. However, ...

javascriptnode.jsreactjsreact-native

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss

Error encountered: JSHint is flagging issues with setting a background gradient using

I have been experimenting with animating a background gradient using jQuery, and here is the code snippet I am working with: this.$next.css('line-indent', 0).animate({ 'line-indent': 100 }, { "duration": 750, "step": functi ...

javascriptjqueryjshint

Angular prevents the page from reloading when using `$window.location`

I'm facing an issue while trying to refresh my admin page using Angular. I've come across $window.location.reload() and $route.reload(). I attempted to use $window.location.reload() by injecting $window into the function parameters. scope.uploadL ...

javascriptangularjs

We have encountered an issue with the syntax in the code: ajaxsample/update_agenda. It seems to be an unrecognized expression according to

Here's the code for updating my controller: public function update_agenda() { $id= $this->input->post('did'); $this->load->model('agenda_model'); $data = array ( ...

javascriptphpjqueryajaxcodeigniter

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

htmlcss

Adjust the height of an element when an animation is initiated (Angular)

Check out the transition I've set up to smoothly slide between my views: https://plnkr.co/edit/yhhdYuAl9Kpcqw5tDx55?p=preview To ensure that both 'panels' slide together, I need to position the view absolutely. However, this causes the view ...

javascriptangularjsangularjs-directive

How to Use the env() Variable in CSS Styling?

Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button: A valuable insi ...

cssreactjsmaterial-uicss-variablesemotion

One the year is chosen, it will be automatically hidden and no longer available for selection

<div ng-repeat="localcost in vm.project.localCosts" layout="column"> <md-select name="localcost_{{$index}}"ng-model="localcost.year" flex> <md-option ng-repeat="years in vm.getYears()" ng-value="years">{{years}}< ...

javascriptangularjsmomentjsangular-material

Spring load without CSS

Upon successful login, I am redirected to my main site using the following controller: //Login Success @GetMapping("/login-success") public ModelAndView loginSuccess() { return new ModelAndView("/cont/home.html"); } The URL for this redirection i ...

javahtmlcssspring

I am having trouble getting the jsTree ajax demo to load

I am having trouble running the basic demo "ajax demo" below, as the file does not load and the loading icon continues to churn. // ajax demo $('#ajax').jstree({ 'core' : { 'data' : { ...

javascripthtmlajaxjstree

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

cssreactjsimportsassnext.js

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

Using and accessing Ajax response across all routes in an application

I am developing a Node.js Express API application that requires several AJAX calls at the start of the application for global data access in all requests. At the beginning of my app.js file, I include: var users = require('./modules/users'); I ...

javascriptnode.jsajaxexpressglobal-variables

Enhance your user experience by implementing a jQuery solution that makes a div

Looking to add a small div on the right side of your screen that moves along with your vertical window slider? Wondering if jQuery has a function to get the current vertical slider position? I thought scrollTop() might work, but it only returns from a spe ...

jqueryhtmlcssjquery-ui

Troubleshooting issues with environment variables in Next.js version 12.2.2

I tried following the steps outlined in the official documentation, but I'm encountering an issue. Here is what I did: next.config.js const nextConfig = { reactStrictMode: true, swcMinify: true, env : { MORALIS_ID: 'moralisId', ...

javascriptnext.js