Stop social links in footer going grey on hover.

Site URL: http://www.timjobling.co.uk

Hi, 

I'm having an issue with the social link in my sites footer. I have managed to change the hover colour to match the rest of my site, however for some reason whenever I hover over the footer the icons go grey, then when you roll over them they go the correct colour. I think this is something that is in-built in to template, but I was wondering if anyone knows how to override it as it doesn't look great!

Thanks, 

Tim. 

On 3/22/2022 at 6:16 PM, timjphoto said:

Site URL: http://www.timjobling.co.uk

Hi, 

I'm having an issue with the social link in my sites footer. I have managed to change the hover colour to match the rest of my site, however for some reason whenever I hover over the footer the icons go grey, then when you roll over them they go the correct colour. I think this is something that is in-built in to template, but I was wondering if anyone knows how to override it as it doesn't look great!

Thanks, 

Tim. 

It looks like you solved it? I see it go blue when hover now

@tuanphan Thanks for your reply. That's correct I've got the icons to go green on hover, the issue I'm having is that when you hover anywhere in the footer the icons go grey, I want the icons to stay black until you hover over them. 

On 3/24/2022 at 5:38 PM, timjphoto said:

@tuanphan Thanks for your reply. That's correct I've got the icons to go green on hover, the issue I'm having is that when you hover anywhere in the footer the icons go grey, I want the icons to stay black until you hover over them. 

Try adding this to Design > Custom CSS

div#socialLinks:hover .sqs-use--icon {
    fill: rgba(0,0,0,1) !important;
}
div#socialLinks a:hover .sqs-use--icon {
    fill: #00ffea !important;
}

@tuanphan thanks very much for your reply. I tried the above code and unfortunately it didn't work, the social icons are still greying out and they also aren't turning green on rollover. Thanks.

On 3/28/2022 at 5:33 PM, timjphoto said:

@tuanphan thanks very much for your reply. I tried the above code and unfortunately it didn't work, the social icons are still greying out and they also aren't turning green on rollover. Thanks.

 

I see it worked. Can you check it again?

@tuanphan the social icons are still greying out when you hover anywhere over the footer. Thanks.

On 3/30/2022 at 5:59 PM, timjphoto said:

@tuanphan the social icons are still greying out when you hover anywhere over the footer. Thanks.

 

Screen Recording 2022-03-30 at 11.58.56.mov

Have you tried adding the code yet? I just tested the code again & It should work

If it still doesn't work, add & keep the code, we can check easier

div#socialLinks:hover .sqs-use--icon {
    fill: rgba(0,0,0,1) !important;
}
div#socialLinks a:hover .sqs-use--icon {
    fill: #00ffea !important;
}

@tuanphan I've added the code again, it doesn't seem to be working, the social icons are still going grey before green. I'll leave the code in this time. Many thanks, Tim.

@tuanphan I'v got the code working, I still had my pervious code in there which was preventing yours from working. Many thanks again for all your help.