-
AuthorPosts
-
July 27, 2017 at 3:40 am #830434
Hey guys,
I want to change the link hover highlight color in my text entries, I thought it would be a simple change in General Styling but it doesn’t seem to work. I’m not sure where I need to adjust it.
Here’s where I want to change it:
Where it says “Bartholomew Cooke”. I want to change the color to be a bit darker when you hover over it.
Could you guys take a look through my site and tell me what I’d need to adjust?Thanks!
ChrisJuly 27, 2017 at 6:29 am #830455Hi Chris,
Try adding this css code in Quick CSS:
.postid-4641 #av-layout-grid-3 a:hover { color: #ccc; }
If it affects other links, please add a class to the link. Hope this helps :)
Best regards,
NikkoAugust 7, 2017 at 3:48 am #835182Hey Nikko,
Thanks! But how do I apply the class? I want to use this pretty much wherever I have a link. Is the solution adding a class or fixing however I set my general styling?
Chris
August 10, 2017 at 12:00 am #836695Hi Chris,
First make sure that Show element options for developers is checked under Enfold > Layout Builder, then on the page add a class on the module. Then just add this css:
.my_custom_class a:hover { color: #444; }
or
.my_custom_class a:hover { color: #444 !important; }
Hope this helps. :)
Best regards,
NikkoAugust 10, 2017 at 5:42 am #836739Hey Nikko,
I tried that but it isn’t working. Specifically, Im trying to do it first at the bottom of my homepage (ccyran.com), where it says “see all work”
In the custom CSS class of that module, I called it “hover”
then I added this custom css, but it didn’t work. also tried the css you gave below it but no luck :/
.hover a:hover {
color: #dedede
}- This reply was modified 7 years, 4 months ago by ccyran.
August 12, 2017 at 8:09 pm #838001Hi,
Did you add your style inline with your link code?
Try removing the inline style and using this css:.hover a { color: #f9f9f9; line-height: 1.4em; text-decoration: underline; } .hover a:hover { color: #dedede }
Best regards,
MikeAugust 12, 2017 at 8:58 pm #838015Hey Mike,
Yep I did that. I gave it the title “Hover” and used the CSS you provided but no luck.
August 12, 2017 at 9:33 pm #838028Hi,
I removed all of your inline style and added a class to your link like this:<a class="saw" href="http://www.ccyran.com/work/">See All Work</a>
Then I added this css to the end of your Quick CSS:
a.saw:link { color: #f9f9f9!important; text-decoration: underline!important; } a.saw:hover { color: #dedede!important; }
Note that the colors are not too different, but you can see a slight change.
Please clear your cache :)
Best regards,
MikeAugust 12, 2017 at 10:05 pm #838040Hey Mike,
I see, thanks!
August 13, 2017 at 12:32 am #838086 -
AuthorPosts
- The topic ‘Change Link Hover Highlight Color’ is closed to new replies.