Action bar styles

Please help me to add custom style on action bar
I need to when you hover adds style to both the elements the icon and link

This code, when you hover over the icon adds style both to the icon and link:
.contact_details i:hover, i:hover~a {
text-decoration: none;
color: #fff !important;
}

when you hover over the link adds style to the link, to the icon does not:
.contact_details a:hover, a:hover~i {
text-decoration: none;
color: #fff !important;
}

I need to styles were added to both of the elements when you hover over any of them.

P.S. sorry for the google translation and thank you for your attention!

Comments

  • We are not sure what you exactly want to do but if you want to get different color on hover in action bar section, please use below css:
    #Action_bar .contact_details li a:hover { color: #FFF; }
    #Action_bar .contact_details li i:hover { color: #FFF; }
  • Sorry for bad English.
    The code that you gave when you hover highlights elements separately.

    This code highlight both the phone icon and phone number, when i hover phone icon
    .contact_details i:hover, i:hover~a {
    text-decoration: none;
    color: #fff !important;
    }

    but when i hover phone number the phone icon not highlight
    this code doesnt work:
    .contact_details a:hover, a:hover~i {
    text-decoration: none;
    color: #fff !important;
    }

    I need to when i hover the phone number: highlight the phone number and phone icon
  • We have no idea why 2d solution does not work, but instead of what you sent above, please use below css to get the same effect:
    #Action_bar .contact_details li:hover > * { color: #FFF !important; }
  • Thanks a lot! This code work.
Sign In or Register to comment.