I've got the following css for an image class:
Code:
.special img, .special img a
{
background: none;
border: none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.special img:hover, .special img a:hover
{
background: none;
border: none;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
But the div class that's around this image class ONLY overrides the non-hovering 'background: none' and 'border: none'. The opacity of a and a:hover works, but only the background and border 'none' works when you hover.
The background and border of the parent class keeps showing when you don't hover.
I've never seen this kind of selective 'class inheritance' before.