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