We want some of our columns to change their background color on mouse over eg hover, and be able to be clicked through to another page….

However even trying the simplest step of putting in some custom css into the page and calling it from the column to set the column background color does not work…

Custom CSS on page is

.columnbackground {
background-color:#2D06BE;
}

Then in the column I edit and put this in class – .columnbackground

But nada – doesnt change color at all…. However if I pop background-color:#2D06BE; straight into CSS it works perfectly… I have know wasted hours on this 🙁 If anyone could help me out I would be very greatful!

Thanks

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

http://cerberon.solutions/home2/

Thank you for writing in!

Upon checking, it seems you have added the class to your column shortcode with “.” (see: http://prntscr.com/4lruf1). Please note that “.” is only added to target a class in CSS. Please check this: http://www.w3schools.com/css/css_selectors.asp

So basically, you only have to add columnbackground in your column shortcode. To change the color on hover, you can add the following CSS under Custom > CSS in the Customizer:

/* Adding transition, for smooth effects */

.x-column.columnbackground,
.x-column.columnbackground .h-custom-headline {
   -webkit-transition: .25s linear all;
   -o-transition: .25s linear all;
   transition: .25s linear all;
}

/* Changing background color of Column on hover */

.x-column.columnbackground:hover {
   background-color: #2D06BE;
}

/* Changing the color of text on hover */

.x-column.columnbackground:hover .h-custom-headline,
.x-column.columnbackground:hover p {
   color: #fff;
}

Hope this helps. 🙂

Thank you.

Thanks so much again 🙂

You can set link to any text ,select the text and click on insert link icon and add the link in there just like the screen shot below:
http://prntscr.com/4ltfzk

Hope it helps.