a:hover background replacement on a empty a tag not working

Question

Hi, Im using hyperlinks as a image, well a background image so that I can do a image swap eaisly with a:hover.

I have the following:

<a class="cross" href='#'></a>

And the following css

a.cross {
    background:transparent url(/images/cross-grey.png) no-repeat scroll 0 0;
    float: right;
    border: none;
    width: 19px;
    height: 19px;
    display: block;
}

a:hover.cross {
    background-position: 0 20px;

}

This works fine in Firefox but not in IE6. Is this a issue with IE6 and a simple css fix or is there a better way of implementing what I am doing. Thanks.

Answer 1

Change:

a:hover.cross { }

To:

a.cross:hover { }

Answer 2

Hi,

I think you should deal the a:hover.cross with javascript.

Regards.