colour of hover transitions on links

  • Resolved SDN

    (@susan-ideology)


    6 years, 1 month ago

    This is a new thread, leading on from this earlier on
    https://www.ads-software.com/support/topic/twenty-seventeen-hyperlink-text-underline/#post-10784325
    I would like to change the colour of the hover transitions from the default black. The code that Andrew provided yesterday changes the base color of some of the links – those in the footer and in my custom sidebar menu but on hover the transition is still black. In other links, such as the woo commerce tabs and breadcrumbs there is no change at all.

    This is my custom css so far…I attached Andrew’s suggested css to some other elements as well which seemed to be relevant.

    .entry-content a,
    .entry-summary a,
    .widget a,
    .site-footer .widget-area a,
    .posts-navigation a,
    .widget_authors a strong,
    .entry-content a:hover,
    .entry-summary a:hover,
    .widget a:hover,
    .site-footer .widget-area a:hover,
    .posts-navigation a:hover,
    .widget_authors a strong:hover {
    box-shadow:
    inset 0 0 0 rgba(0, 0, 0, 0),
    0 3px 0 pink;
    }

    .entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a {
    box-shadow:
    inset 0 0 0 rgba(0, 0, 0, 0),
    0 3px 0 pink;
    }
    .entry-content a, .entry-summary a, .comment-content a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong {
    box-shadow:
    inset 0 0 0 rgba(0, 0, 0, 0),
    0 3px 0 pink;
    }

    Any further advice on this would be most welcome! Thanks.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter SDN

    (@susan-ideology)

    Hi, I’ve managed to resolve this with the following code for non woo commerce links and some separate code which has worked for the woo commerce tabs and breadcrumbs.
    .entry-content a:focus,
    .entry-content a:hover,
    .entry-summary a:focus,
    .entry-summary a:hover,
    .comment-content a:focus,
    .comment-content a:hover,
    .widget a:focus,
    .widget a:hover,
    .site-footer .widget-area a:focus,
    .site-footer .widget-area a:hover,
    .posts-navigation a:focus,
    .posts-navigation a:hover,
    .comment-metadata a:focus,
    .comment-metadata a:hover,
    .comment-metadata a.comment-edit-link:focus,
    .comment-metadata a.comment-edit-link:hover,
    .comment-reply-link:focus,
    .comment-reply-link:hover,
    .widget_authors a:focus strong,
    .widget_authors a:hover strong,
    .entry-title a:focus,
    .entry-title a:hover,
    .entry-meta a:focus,
    .entry-meta a:hover,
    .page-links a:focus .page-number,
    .page-links a:hover .page-number,
    .entry-footer a:focus,
    .entry-footer a:hover,
    .entry-footer .cat-links a:focus,
    .entry-footer .cat-links a:hover,
    .entry-footer .tags-links a:focus,
    .entry-footer .tags-links a:hover,
    .post-navigation a:focus,
    .post-navigation a:hover,
    .pagination a:not(.prev):not(.next):focus,
    .pagination a:not(.prev):not(.next):hover,
    .comments-pagination a:not(.prev):not(.next):focus,
    .comments-pagination a:not(.prev):not(.next):hover,
    .logged-in-as a:focus,
    .logged-in-as a:hover,
    a:focus .nav-title,
    a:hover .nav-title,
    .edit-link a:focus,
    .edit-link a:hover,
    .site-info a:focus,
    .site-info a:hover,
    .widget .widget-title a:focus,
    .widget .widget-title a:hover,
    .widget ul li a:focus,
    .widget ul li a:hover {
    color: #000;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(136, 195, 195, 1);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(136, 195, 195, 1);
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Very nice! Thanks for providing the solution.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘colour of hover transitions on links’ is closed to new replies.

Tags