Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 25, 2016 at 3:21 pm #571370
    philj0

    hey guys,
    I just play around with the hover effects of the .av-catalogue-list > li:hover. I finally found out how to change the text-transformation and the background-color, but I dont know how to change the text-color on the hover effect. I still try this one with no change:
    .av-catalogue-list > li:hover {
    font-color: white !important; –> I try all the different variants (color: white !important; / color: rgba(255,255,255,1) !important; etc)
    background: rgba(0,153,150,1) !important;
    }

    Thanks for your help!

    January 25, 2016 at 3:30 pm #571374
    Yigit

    Hey philj0!

    Please try using following code

    .av-catalogue-list > li:hover {
color: white !important;
background: rgba(0,153,150,0.2) !important;
}

    If that too does not work, please post the link to your page

    Cheers!
    Yigit

    January 25, 2016 at 3:46 pm #571389
    philj0

    hey,
    thanks for quick reply! But the same code I already tried.
    The AV-Catalouge is on the first page on our website. The Link is in the private content.

    January 25, 2016 at 6:10 pm #571499
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .av-catalogue-list > li:hover * {
    color: white!important;
}

    Cheers!
    Yigit

    January 26, 2016 at 9:34 am #571967
    philj0

    Hey Yigit,
    thanks for your help, works perfectly!

    January 27, 2016 at 6:52 am #572616
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

    March 29, 2016 at 2:49 pm #604573
    Alexoidea

    Dear all dear Kriesi team,

    I experience a similar issue thus why no new topic is opened, and use the above mentionned code.

    On the very same page, however, I use two distinct catalogues. Each one should have its own hover color (for the purpose of site signeage) but I experience difficulties to “target” each catalogue distinctly and assign its own adressable hover color.

    Could you please help?
    1st catalogue is associated to avia-builder-el-6 –> desired hover color : #2596C3 (blue)
    2n catalogue is associated to avia-builder-el-10 –> desired hover color : #ff2d8f (magenta)
    Thx

    • This reply was modified 8 years, 7 months ago by Alexoidea.
    March 29, 2016 at 2:54 pm #604579
    Yigit

    Hi!

    You can turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your elements and give them two different custom CSS classes and then use the code as following 

    .your-custom-class-one li:hover * {
    color: #2596C3 !important;
}
.your-custom-class-two li:hover * {
    color: #ff2d8f !important;
}

    Best regards,
    Yigit

    March 29, 2016 at 4:22 pm #604670
    Alexoidea

    Oh that was so simple… Thank you so much Yigit!

    March 29, 2016 at 5:54 pm #604704
    Yigit

    Hi!

    You are welcome, always happy to help :)
    Let us know if you have any other questions or issues

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘AV-Catalogue Hover Font-color change’ is closed to new replies.