-
Posts
-
Hi,
I’ve been attempting to modify the hover color for the social media icons I put into this site’s footer. I have set the footer as an individual page and used the layer slider to build it.
In the layerslider, I have added this CSS class to every single icon: aone.
Then I added this CSS:
.aone:hover {
color: #00a3c5;
}In a previous thread, someone from your team commented, “Styling your social icons; I still can’t see a custom class added to them, if you can’t add one, then we can’t target them with CSS.”
So I am including a screen video to show how/where I added a custom class to every icon: https://d1aettbyeyfilo.cloudfront.net/marysise/20434369_1623974008667CSS_Class_issues.mov
What I figured out is that when I add a link to the icons, that’s when the CSS I created stops working. Does my code need to have “a” in it somewhere to reference the link aspect of the styling? I originally used a.one and that didn’t work as the css class.
Thanks so much for your help.
Hey wordninj,
Thank you for the video and the link to your site, I found that when a class is added to the layerslider element it is not added to the link it is added to a sibling span so the css should have been:.ls-wrapper > .aone + a.ls-layer-link:hover { color: #00a3c5!important; }but this doesn’t work because I believe that the color of the layers has a higher value. I did find that the color on mouse-over can be applied as a Hover Transition by enabling and adding the color to the style:
I did this for you on each one, please clear your browser cache and check.Best regards,
MikeHey Mike, I know it’s taken me awhile to respond, but just wanted to take a moment to say thank you for such a great job with such clear explanation.
- You must be logged in to reply to this topic.