Docs

[alelingo]

HI,

Im trying to make containers with hover, so when mouse-over it, looks like in the picture attached.

URL: http://precisionairparts.com

How can I get that effect?
Have been trying with no success, please help!

Thanks,
Ale

[Friech]

Hi Ale,

Thanks for writing in! Which container are you referring to? You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($){
$('.home #x-section-2').hover(
       function(){ $(this).addClass('container-hover-state') },
       function(){ $(this).removeClass('container-hover-state') }
)
});

Then add this on your Custom CSS

.container-hover-state {background-color: #CA5C12 !important;}

This effect will only apply on your home page second section. You can assign a class to your containers and replace the .home #x-section-2 with that class.

Hope it helps, Cheers!

[alelingo]

Hi Staff,

I added a raw content with a container short code inside, its the yellow one on the bottom “News” webpage.

But that didn’t work, even though I changed the class :(.

Can you help me?

Thanks,
Ale

[Jade]

Hi Ale,

Sorry for the confusion.

If you are simply wanting to add a hover effect to a section, you can do it by adding css hover state for the sections like:

#x-section-2:hover {
    background-color: #000 !important;
}

If you’re not able to determine what the correct ID name of the section is, you can add you custom ID in Cornerstone for the specific section. Just make sure that the ID matches the CSS selector.

Hope this helps.

[Author]

Posts