Headline and Text Color Change on Column Hover

Support
#1

Hi - I have 4 columns with a CSS background color change hover effect applied to each individually. I have a Headline element and a text element in each that I want to change colors at the same time as the background color, but I’m having a hard time selecting them with my CSS. I want the effect to apply to the headline and text in all 4 columns when the column is hovered over. Thanks!

#2

Hello There,

Thanks for writing in!

If your code applied to the column is like this:

.x-column {
   background-color: red;
}

.x-column:hover {
   background-color: green;
}

You can use this code to target the headline element and the text element:

.x-column {
   background-color: red;
}

.x-column:hover {
   background-color: green;
}

.x-column .x-text,
.x-column .x-text-headline {
   color: white;
}

.x-column:hover .x-text,
.x-column:hover .x-text-headline {
   color: yellow;
}

If this is not your code, please share your code and provide the page where we can find this 4 columns so that we can give you a tailored code for your page.

Thank you.

#3

Thanks - this worked great for the text but not for the headlines.

The URL is scopomarketing.com

#4

Hi there,

Please try this code to the Element CSS of the Row that contains the columns instead:

$el .x-column:hover * {
  color: #fff;
}

Please check the links below for the references of the suggestions above:

Hope this helps.

#5

I tired that code in the Row Element CSS, but the headlines are still not changing. I tried adding an “!important” to the color and in the cornerstone builder preview it worked, but when I loaded it through my browser it wasn’t working

#6

Hi again,

I see you’ve given columnbackground class to the columns, you can use this class and add the following code instead in the Theme Options > CSS:

.columnbackground:hover * {
    color: #fff !important;
}

Let us know how this goes!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.