Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 27, 2017 at 3:40 am #830434
    ccyran

    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:

    Galaxy View

    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!
    Chris

    July 27, 2017 at 6:29 am #830455
    Nikko

    Hi 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,
    Nikko

    August 7, 2017 at 3:48 am #835182
    ccyran

    Hey 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 #836695
    Nikko

    Hi 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,
    Nikko

    August 10, 2017 at 5:42 am #836739
    ccyran

    Hey 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, 3 months ago by ccyran.
    August 12, 2017 at 8:09 pm #838001
    Mike

    Hi,
    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,
    Mike

    August 12, 2017 at 8:58 pm #838015
    ccyran

    Hey 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 #838028
    Mike

    Hi,
    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,
    Mike

    August 12, 2017 at 10:05 pm #838040
    ccyran

    Hey Mike,

    I see, thanks!

    August 13, 2017 at 12:32 am #838086
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change Link Hover Highlight Color’ is closed to new replies.