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.