Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 6, 2016 at 11:13 pm #560808
    Owen

    I have a text link in a LayerSlider and I would like to have the text change color when you hover the mouse over the text link.

    As a test, I tried putting the following into the CustomCSS field of the text layer “For Small Businesses”
    a:hover { color: green; text-decoration: underline }
    See screen capture:
    https://www.dropbox.com/s/zgdmi468sa6lw0j/2016-01-06_14-10-47.jpg?dl=0

    So far I haven’t had any success at getting it to work.

    January 7, 2016 at 1:52 am #560884
    Elliott

    Hey Owen!

    Add this to your custom CSS.

    .avia-layerslider strong:hover {
    color: red !important;
}

    Cheers!
    Elliott

    January 7, 2016 at 8:59 pm #561490
    Owen

    I added the code to the Custom CSS field in the LayerSlider Styles tab and it didn’t work.

    January 7, 2016 at 9:54 pm #561530
    Basilis

    Hi!

    Please do try the following 

    .avia-layerslider strong a:hover {
    color: red !important;
}

    and let us know if it is working as should.

    Best regards,
    Basilis

    January 7, 2016 at 11:05 pm #561583
    Owen

    Nope, still doesn’t work.

    January 7, 2016 at 11:21 pm #561595
    Owen

    I am leaving the “Pricing for Small businesses” un-touched so you can look at what may be causing it.

    I am modifying “Pricing for Med/Large Businesses”….Trying to find what may be causing it.
    I changed “Pricing for Med/Large businesses” from H3 to Paragraph and neither of the above solutions work for that either. Could it have anything to do with me using H3?

    Any change I do I wan to apply ONLY to THIS LayerSlider…I don’t want any other sliders to have this hover font color.

    Thanks for your help!
    -Owen

    January 8, 2016 at 5:00 am #561809
    Ismael

    Hey!

    Thank you for the info. Please edit the text layer then go to the Attributes panel. In the “Class” field, add “custom-text” then save. Use this code in the Quick CSS field:

    .custom-text:hover { 
color: red !importan;
}

    Regards,
    Ismael

    January 8, 2016 at 6:09 am #561839
    Owen

    BINGO! That worked!

    For people searching this in future, I corrected a mistake above….what worked is:

    .custom-text:hover {
    color: red !important;
    }

    (The “t” was missing from “important”)

    Thanks for the help!
    -Owen

    January 9, 2016 at 5:27 am #562299
    Ismael

    Hi!

    My bad! Thank you for noticing the syntax error. Let us know if you need anything else. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘LayerSlider Custom CSS for Mouse Hover Link Color’ is closed to new replies.