[Support request] changing multiple items on hover

[Heinrich]

hi team,
i am struggling with a task which looks very simple at the first moment.

gb container with a background image and a headline in it. the headline has a color background. on hover (the whole container) following should change:

– background image
– headline-text
– background color headline

have tried countless plugins (flip, overlay..) and played around with display and visibility….
really appreciate useful thoughts on this.

[David]

Hi there,

can you share a link to your site where i can see this layout?

[Heinrich]

of course

[David]

Do you have this layout setup on a GP site ? Need to see how you have created the containers etc.

[Heinrich]

hi david,
yes of course.

[Tom]

You will need to do something like this:

.gb-container.your-container-class:hover {
    background-image: url(URL TO YOUR HOVER BACKGROUND);
}

.gb-container.your-container-class:hover .gb-headline.your-headline-class {
    background: red;
    color: white;
}

Let me know if you need more info 🙂

[Heinrich]

hi tom, one thing is missing, the text has to change too. not only the background color.
any idea?

[Elvin]

Hi,

To clarify: You’re trying to change different elements and their stylings when you hover the container?

If so, you’ll need a script to add event listeners to the container if you want it to be the hover trigger point to change all of its contents.

Example:

function add_hover_listeners(){
var switchingElem = document.querySelectorAll(".hover-container");
for( i=0; i<switchingElem.length; i++ ){
switchingElem[i].addEventListener("mouseover",function(){
//do your style changes here. 
// example: this.querySelector(".headline-text").style.display = "none";
// this.querySelector(".headline-text-onhover").style.display = "block";
});
switchingElem[i].addEventListener("mouseout",function(){
//do your style changes here. 
// example: this.querySelector(".headline-text").style.display = "block";
// this.querySelector(".headline-text-onhover").style.display = "none";
});
}
}
window.addEventListener("DOMContentLoaded",function(){
add_hover_listeners();
});

And this is just a simple example of displaying/hiding a specific element. You can add in more as long as you know the right CSS selectors.

[Author]

Posts