Fafanellu Fafanellu - 7 months ago 55
CSS Question

Shortcodes Ultimate DIV color

I use Wordpress and Shortcodes Ultimate, and I'm currently using a shortcode named "service". It displays a text, with a title and an icon.

My purpose is to change the background color and the text color when the mouse is over the service area. I analyzed the HTML code of my page and found that there were two DIV elements for the "service" shortcode : su-service-title, su-service-content.

So, in my CSS file I wrote :

.su-service-content:hover, .su-service-title:hover{
background-color: #2680BE;
color: white;

The background correctly displays in both title and content elements, but the white text only displays properly in the title : the content text color does not change. The style title used for the content text is h3.

Here is the page I'm working on :

Thank you for you help


In the css of your template there is already a general styling rule for the color of h3. You should rather specify your selector a bit more in order to overrride this:

.su-service-content:hover h3, .su-service-title:hover {
    background-color: #2680BE;
    color: white;