Tutorial

Elementor Change Background On Hover

Uses Plugins

Elementor Free
Elementor PRO

Description

Another question from the Global Elementor Community. The author wanted to know how to change a section background when an inner column is hovered. The example URL gives uses the Unlimited Elements Plugin. This video shows a way to do it without a plugin.

Note, this video demonstrates using Flexbox Containers. It could easily be done with Sections /Columns as well.

1

Outer Container

  1. Add a container to the editor
  2. Set the Direction to Row
  3. Set the class to "container-hover-bg-change"
  4. Set the initial Background Image. Set it to "Center center", "Cover"
  5. Set the Background overlay
2

Inner containers (columns)

  1. Add a container inside the first one (Outer Container)
  2. Style it how you like
  3. Add some content
  4. In Advanced -> Attributes ,  add an attribute "data-bg-src" with a relative path to an image. e.g. "data-bg-src|/wp-content/uploads/2022/08/20180324-161106.webp"
  5. Duplicate this container
  6. Change the "data-bg-src"  to a new image
  7. Repeat 5 & 6
3

JavaScript

  1. Add an HTML Widget to the editor, must be below the above containers
  2. Copy and paste the JavaScript below into this Widget

Code (click to copy)

JavaScript for HTML Widget (javascript)

<script>
    ;((d)=>{
        const bgContainerSelector = '.container-hover-bg-change';
        
        const bgHoverContainers = d.querySelectorAll(bgContainerSelector);
        
        bgHoverContainers.forEach( outerContainer =>{
            const triggerContainers = outerContainer.children;
            Array.from(triggerContainers).forEach( innerContainer => {
               innerContainer.addEventListener('mouseenter', (e)=>{
                   const imgSrc = innerContainer.dataset.bgSrc;
                   outerContainer.style.backgroundImage = 'url(' + imgSrc + ')';
               })
            });
        })
        
    })(document);
</script>