Docs

[DanielGruppen]

Hi,

On http://www.puurwebconcept.nl/ there you see 3 blocks next to each other (called ‘WordPress webdesign’, ‘Hoger in Google (SEO)’ and ‘Adverteren op Google (SEA)’).

These blocks have all 3 different background color. Now I want to change the background color when someone is hovering over the blocks? How can I do it?

[Jade]

Hi Daniel,

Please try this code:

.page-id-50 #x-section-3 .x-column:nth-child(1) {
    background-color: #efefef !important;
}

.page-id-50 #x-section-3 .x-column:nth-child(2) {
    background-color: #efefef !important;
}

.page-id-50 #x-section-3 .x-column:nth-child(3) {
    background-color: #efefef !important;
}

Please set the background color values of the boxes to your requirement.

Thank you.

[DanielGruppen]

Hi Jade,

It doesn’t work. The color should change when hover over the boxes…

[Zeshan]

Hi Daniel,

Thanks for writing back!

Please try this CSS code instead:

.page-id-50 #x-section-3 .x-column:hover:nth-child(1) {
    background-color: #efefef !important;
}

.page-id-50 #x-section-3 .x-column:hover:nth-child(2) {
    background-color: #efefef !important;
}

.page-id-50 #x-section-3 .x-column:hover:nth-child(3) {
    background-color: #efefef !important;
}

Change the colors as per your preference (you can generate color codes here).

Thank you!

[Author]

Posts