Search code examples
csshyperlinkvisited

How to Set Background for Visited Links


Hi I try to set a background for visited links, but it does not work. What is going wrong?

CSS

ul a {display:inline-block; background:red url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSM7ZUDsq2jyP6Vz2yEmPl1HPVYQ5lUSL5MUoPvZw786K9mDfrWx9ZwYrY") center center no-repeat;
  ;color:#333;height:40px;line-height:40px;font-size:18px}
ul a:visited { background:blue url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRY3mOWqadrnwEId1cCx6fVM_ffhE1OzmnbGcRrkKPv1YGxHUZElGyGuc8") center center no-repeat;
;color:#fff}

HTML

<ul>
    <li><a href="http://www.google.com">google</a></li>
    <li><a href="http://www.yahoo.com">yahoo</a></li>
    <li class="t2" ><a href="http://www.adsense.com">adsense</a></li>
    <li><a href="http://www.budamivardi.com">budamivardi</a></li>
    <li><a href="http://www.jsfiddle.com">jsfiddle</a></li>
    <li><a href="http://www.jsfiddle.com.tr">jsfiddle</a></li>
    <li><a href="http://www.jsfiddle.de">jsfiddle</a></li>
</ul>

jsFiddle


Solution

  • You had two extra colons and were missing a colon (your CSS was very compressed).

    FIDDLE

    I removed the background images so only the color changes.

    You can now "adjust" it as you see fit.

    The CSS spec does not allow background-images on :visited links.

    CSS:

    ul a {
        display:inline-block; 
        background-color: red;
        color:yellow;
        height:40px;
        line-height:40px;
        font-size: 18px;
        padding: 10px;
    }
    ul a:visited {
        background-color: blue;
        color: green;
    }