Jerarquía en varias div

[ceaped]

Buenos días
Tengo estas div:

Código HTML:

<a class="marco_1a" href="#" title="Titulo"></a>
<a class="marco_1b" href="#" title="Titulo"></a>
<a class="marco_1c" href="#" title="Titulo"></a>
 

Y así esta el css:

Código CSS:

.marco_1a {
    width: 555px;
    height: 213px;
    display: block;
    margin: -281px 0 0 53px;
    position: absolute;
}
 
.marco_1a:hover {
    background-image: url(../images/grafico_1a.png);
}
 
.marco_2a {
    width: 555px;
    height: 213px;
    display: block;
    margin: -281px 0 0 53px;
    position: absolute;
}
 
.marco_2a:hover {
    background-image: url(../images/grafico_2a.png);
}
 
.marco_3a {
    width: 555px;
    height: 213px;
    display: block;
    margin: -281px 0 0 53px;
    position: absolute;
}
 
.marco_3a:hover {
    background-image: url(../images/grafico_3a.png);
}
 

¿Qué debe hacer?: cuando me paro sobre cada uno se resalte, pero sólo me funciona uno.

He tratado con z-index y no me funciona.

¿Cómo hago para que que me funcione cada uno?

Gracias por su ayuda

[Ito79]

Hola,

A ver, creo que tienes algunas confusiones y también las tengo yo...a ver si se resuelven :D

Hablas de DIV pero estás usando elementos A (enlaces), que vale, los puedes formatear como "si fueran DIV" pero ¿por qué?

Luego estás colocando los tres elementos exactamente uno encima de otro, cuando dices que no te funciona, ¿qué esperas que haga? Sólo vas a ver uno, el que esté "por encima".

Y por último, en los estilos estás usando los nombres marco_2a y marco 3a, pero en el HTML se llaman marco_1b y marco_1c

Un saludo
Ito