Background-Image: for :Visited Links

background-image: for :visited links?

Your code is correct according to most specifications. However, many browsers consider background images on visited links a potential violation of user's privacy, so they do not allow it.

Observe this example:

<p><a href="/unvisited">Unvisited link</a></p>

<p><a href="http://jsfiddle.net/">Visited Link</a></p>

<style>
a {
  background:red url("http://placekitten.com/100/101?image=2") center center no-repeat;
  display: block;
  height: 200px;
  width: 200px;
  overflow: hidden;
  text-align: center;
  background-color: red;
}

a:visited {
  background:blue url("http://placekitten.com/100/100?image=1") center center no-repeat;
}
</style>

(Also at http://jsfiddle.net/Yq5GY/1/). Firefox ignores the background image declaration for visited links, and never displays the solo kitten. You can do some differentiation with background color. It's bad usability to rely on images alone, anyhow.

How to Set Background for Visited Links

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;
}

CSS. Changing image visited link

You cannot alter the src-attribute of an image throught CSS. If it, for some reason, have to be an img-element, then you are stuck with JavaScript for the alteration.

The other alternative would be to get rid of the img-element and use only the anchor with a background instead. The background-property can be controlled through CSS.

Here is a simple example of how to do it for :hover, but in you case :hover could just as easy be changed to :visited instead.

If you place the "visited"-image below the default image in a file called sprite.png, the code would be:

a.mylink {
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
    background: url(sprite.png) no-repeat;
}

a:visited.mylink {
    background-position: 0 -240px;
}

See it live here: http://jsfiddle.net/5ZzkY/ (Uses background-color instead of image for simplicity)

css background color show on image links

Thats because you're not unsetting the background of the link but the background of the image inside of that link.

A solution for that would be to put a class on every link containing an image so you can reference it directly by #content .className and unset background and padding there.

Unfortunately you can't select an a by figuring out what it contains with pure css. You could do that with javascript, but its highly possible that that will be an overkill. jQuery for example has the :has() selector providing exactly the functionality you search for. Also there seems to be a selector providing this functionality to CSS in draft.

How to style a div with background images using pseudoclasses :active :visited :hover?

Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.

Here i made a fiddle for you

You can see where .css differs

.topleftbox:hover {
    background: blue;
}
.topleftbox:visited {
    background: yellow;
}
.topleftbox:visited:hover {
    background: pink;
}
.topleftbox:active {
    background: green;
}

Also, you should give a check to the ORDER in witch you define your styling.

a:link { color: red } /* unvisited links */

a:visited { color: > blue } /* visited links */

a:hover { color: yellow } /* user hovers */

a:active { color: lime } /* active links */

Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.

An example of combining dynamic pseudo-classes:

a:focus { background: yellow } a:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.

---

Related Topics