opacity a:visited

Question

I can't get opacity to work on a:visited hyperlinks in firefox or IE

If I set the background color of a:visited it will work fine, but the opactity will not set.

Any ideas?

Here is my css:

a.photo
{
    display: inline-block;
}
a.photo img
{
    border: 1px solid #C8C8C8;
    background-color: #ffffff;
}
a:hover.photo img, 
a:active.photo img {
    background-color: #FF2D59;
    border: 1px solid #FF2D59;
}
a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
a.small img
{
    width: 80px;
    height: 80px;
    padding: 6px;
}


<a href="#" class="photo small">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="small photo hyperlink" />
</a>

I dont think there is anything wrong with the order of the CSS , becuase if I add a background color , it works just fine:

a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    background-color: Gray;
}

Answer 1

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.

This from IE's Developer Tools console. I'm pretty sure Firefox's shows a similar error.

Sorry. Not much can be done there.

Answer 2

Since 2010, Mozilla browser limit the CSS properties that can be used to style visited links to : - color, - background-color, - border-*-color - outline-color - and the color parts of the fill and stroke properties.

For any other parts of the style for visited links, the style for unvisited links is used instead. In addition, for the list of properties you can change above, you won’t be able to set rgba() or hsla() colors or transparent on them.

Source : http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/