I have the following CSS code:

.menu a:link {
    background-image: url('img/cookieWhole.png');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 15% 50%;
}

.menu a:visited {
    background-image: url('img/cookieBitten.png');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 15% 50%;
    color: #2d548b;
}

.menu a:hover {
    background-image: url('img/img/cookieWholeHover.png');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 15% 50%;
    background-color: rgb(255, 171, 14);
}

When hovering over the links, the background image changes. But after visiting the links, the background image doesn't change (when I set the visited link color to something else it does change) What am I doing wrong?

CodePudding user response：

you can't change the background-image for visited links. Browser restrictions! Only thing allowed to change are:

1. color

2. background-color

3. border-color (and border-color for separate sides)

4. outline color

5. column-rule-color

6. the color parts of fill and stroke

CodePudding user response：

This is disabled for security reasons...

MDN

For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.