ALX Dynamic Tabs Link Hover Color

  • Resolved AZBros

    (@azbros)


    8 years, 9 months ago

    Anyone know how to change the hover color of links in the ALX Dynamic tabs (mine are in the footer of my site)? I’m able to change them using the inspector tool, but when I try the code in my child theme, nothing changes. I was able to change the color of the links themselves and edit the style of just about everything else in the widget, but I can’t adjust the link hover color. Any ideas what I’m doing wrong?

    This is the code I found with the Inspect tool:

    #footer .alx-tab li:hover .tab-item-title a {
color: #b87333;
}

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi AZBros,
    Welcome to Hueman forum ??
    Try this:

    .alx-tabs-container:hover > .alx-tab.thumbs-enabled li{
/* This CSS code will work for other "li"s that isn't hover  */
}

.alx-tabs-container:hover > .alx-tab.thumbs-enabled li:hover{
/* This CSS code will work for active li hover */
}

    If you need help, say us.
    Regards

    Thread Starter AZBros

    (@azbros)

    Hi mehrdads,
    I tried both codes, but neither seems to change the hover color.

    Oops,
    You must put your custom CSS code in that but no problem.
    Put this code in your child theme’s CSS :

    .alx-tabs-container:hover > .alx-tab.thumbs-enabled li:hover a{
color: #b87333;
}

    Thread Starter AZBros

    (@azbros)

    Actually, that’s the code that I tried. Just to be sure, I copied it and tried again, but still nothing. I guess there must be something else going on. I’ll continue to research it. Thanks for your help.

    You’re welcome.
    No problem, Have you Child Theme !?

    @azbros – The problem is that the the theme is loading the Dynamic CSS styles (which contains the same target) internally in the <head> section. This overrides your external stylesheet. You can either use the !important rule:

    #footer .alx-tab li:hover .tab-item-title a {
    color: #b87333 !important;
}

    Or make your child theme CSS more specific by adding another element:

    #footer #footer-widgets .alx-tab li:hover .tab-item-title a {
    color: #b87333;
}

    Personally I’d use the second option.

    Thread Starter AZBros

    (@azbros)

    Awesome, I tried the 2nd option and that did the trick @bdbrown! Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘ALX Dynamic Tabs Link Hover Color’ is closed to new replies.