Customized hover (replace animated underline by animated color change)

Help Customization
1

Hello ! :slight_smile:

Here is my first topic :muscle:

Object : Replace animated underline hover by an animated color change hover.

Illustrations (of the pinned-post navigation bar) :

Further explanations:
The trick I used to remove the underline is to define its color the same as the background color. You can modify the color defined in “root”, and even define more colors for different elements.

CSS code:

/* Customized hover without underline */
:root{
      --background: #111 /*your background color*/
      --hover: #eeeeee /*the hover color*/
}

.pinned:hover, .pinned:active, .post-title a:hover, .post-title a:active, body#collection a.read-more:hover, body#collection a.read-more:active, body#post header nav a.pinned:hover, body#post header nav a.pinned:active, a:hover, a:active  {
    color: var(--hover);
    text-decoration-color: var(--background);
}

Hope this helps :slight_smile:

Kind regards,
MC

PS: I’m interested if someone has another trick to remove the underline instead of coloring it as the background (which visually does the job, but may not be the most elegant solution).

2

You can also do text-decoration: none;

1 Like
3

Thank you, that’s perfect :slight_smile: