Hover highlight using background image

[mhulse]

Note the box-shadow and linear-gradient:

.avr_links a:visited:hover,
.avr_links a:focus,
.avr_links a:focus:hover,
.avr_links a:hover,
.avr_links a:active,
.avr_links a.avr_links-active {
    color: #000;
    background-image: linear-gradient(
        transparent,
        rgba(0, 0, 0, .05) 40%,
        rgba(0, 0, 0, .1)
    );
}
.avr_links a:focus {
    outline: 0;
}
.avr_links a:active {
    box-shadow: 0 0 0 .05em rgba(0, 0, 0, 0.1) inset,
                0 0 1em rgba(0, 0, 0, 0.2) inset;
}
/* Sub-lists: */
.avr_links ul a
.avr_links ul a:visited:hover,
.avr_links ul a:focus,
.avr_links ul a:focus:hover,
.avr_links ul a:hover,
.avr_links ul a:active,
.avr_links ul a.avr_links-active {
    background-image:
    linear-gradient(
        rgba(19, 141, 156, 0.25),
        rgba(19, 141, 156, 0.25)
    ),
    linear-gradient(
        transparent,
        rgba(0, 0, 0, .05) 40%,
        rgba(0, 0, 0, .1)
    );
}

Using linear-gradient with no gradient to fake color overlay; this allows us to pseudo-tint the existing background color.

Example of the above CSS:

Full example: https://gist.github.com/mhulse/047e11c89ec59f7fdabc26d252a08f9a