Need help with CSS footer widget menu hover color

HTML & CSS
1

Hello,

I recently integrated a widget menu into my footer of my Divi theme.
But, there is no hover.

I have searched top and bottom for a solution, but none of the code I have found works.
If you have a solution, please share :slight_smile:

2

Hi,
You will need to provide a link to your page or post some code to get any substantial help.:slight_smile:

However, with third party widget code that you can’t edit it can be tricky to override the styles. Sometimes it requires the !important rule in order to get enough Specificity.

3

Hi,

My website is https://performdigital.co.
Notice the footer and the menu without hover.

Thanks

4

The industry plays a dirty trick on webmasters who buy into the “no code” sales pitch. There is no such thing as a no-code site, especially if you are not satisfied with it “out of the box”.

As you can see here, there doesn’t seem to be any special treatment included for #footer-widgets .footer-widget li a:hover {color:#000000}. Looks like you are supposed to “roll your own”.

https://performdigital.co/wp-content/cache/et/10/et-core-unified-15297282952875.min.css (line 1)

#footer-widgets .footer-widget a, 
#footer-widgets .footer-widget li a, 
#footer-widgets .footer-widget li a:hover {
    color: #000000;
}

You should be able to “roll your own” easily by copying the last line from the above rule and pasting it into your child CSS (which should be the last CSS in the cascade of stylesheets), and changing the color, like this…

#footer-widgets .footer-widget li a:hover {
    color: #f00;  /* red */
}

Remember, though, the widget is probably expecting the site to be responsive and most small devices do not respond to :hover. They expect a click.

5

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