Adjust hover effect on only 1 footer widget

[mrsnooch]

Hi,

This is relating to https://www.softwashsolutions.ie and specifically the third widget titled ‘Find Us’.

I wish to make the two phone numbers clickable but by doing so, the hover effect causes them to change colour to the blue of the background, as per CSS used to change widget links on the second ‘Navigation’ widget. I am unsure how to create a new line of CSS that specifically targets only the phone numbers.

The code I am using is;

footer.x-colophon.top .widget a:hover {
    color:#4878b7;
}

Can you let me know how I can either tell the phone numbers to ignore this CSS, or to make the hover effect on them keep the text white.

Many thanks
Mark

[jade]

Hi there,

What you can do is add a class to the phone numbers like this:

    <a href="#" class="phone">00 (+353) 749 537 940</a>

Then add this code in the custom CSS:

footer.x-colophon.top .widget a.phone:hover {
    color: #fff;
}

Hope this helps.

[mrsnooch]

Hi Jade,

I knew it was something simple, forgot you could assign classes like that.

Thanks for you help, it worked great!

Mark

[Prasant]

You are most welcome.

[mrsnooch]

Hi again,

As a follow up to this, can you tell me how to layout the CSS required to change a class’ hover effect on a link?

Eg. I have contact links down the left hand side of this page, https://www.softwashsolutions.ie/contact-us/ , but the hover effect is white and cannot really be seen on the grey background.

I have already applied a class of ‘phone2’ as per your instructions above, but how exactly do I call upon this class in CSS and tell it to apply black text on hover, and not white.

I have tried various different ways but none work.

I appreciate your help in advance,
Mark

[jade]

Hi there,

Please try this:

.phone2:hover {
    color: #83b128;
}

Hope this helps.

[mrsnooch]

Thanks Jade, this worked great. Could’ve sworn I tried this variation but maybe not…

Thanks!

[jade]

You’re most welcome @mrsnooch.