Cambio de imagen y estilo texto

[pr0]

Buenas tardes,

intentaré explicar mi problema aunque seguro que es una tontería y muchos de vosotros sabeis la respuesta.
Tengo una tabla con 6 columnas, 2 de ellas llevan 2 imagenes con las que quiero hacer un rollover y otras 2 contienen un texto que tambien cambia al hacer rollover mediante un estilo css:


Estilos:

Código HTML:

.opciones a:link {
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
}

.opciones a:hover {
	color:#666666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
}

El problema que tengo es que cuando hago rollover a los textos Aceptar tarea y Recordar mas tarde si puedo hacer que las imagenes de OK y CANCELAR hagan el cambio con:

Código HTML:

onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aceptar','','aceptar_over.png',1)

pero si hago rollover a las imagenes no puedo hacer que los textos cambien a su estilo al estado rollover.

Espero haberme explicado bien, si necesitan alguna aclaración solo diganmelo.


Saludos y gracias de antemano.

[hades87]

pero los textos son enlaces? si es asi no lo podrias especificar con lo de a.link, a.visited y tal?

[pr0]

Hola Hades, gracias por contestar.

Si, efectivamente tanto los botones (imagenes) como los textos son enlaces a la misma pagina. Mi problema viene que al ser 2 elementos diferentes (imagen y texto), cuando haga rollover uno de ellos quiero que tambien se active el rollover del otro, es decir, si hago rollover sobre la imagen quiero que el texto que le acompaña tambien haga rollover.

Espero haberme explicado bien. Saludos y gracias de nuevo.

[Raulmmmm]

Pues yo solo veo la solución de incluir el texto dentro de la imagen.

[webosiris]

si maquetaras semánticamente no tendrías ese problema... por lo que veo sería una lista desordenada con 2 enlaces con img de fondo... código aprox

Código HTML:

<ul>
<li class="aceptar"><a href="#">Aceptar tarea</a></li>
<li class="recordar"><a href="#">Recordar más tarde</a></li>
</ul>


-----------------------------------------------------------------------


li{
padding:10px 20px;
display:inline}

.aceptar li a,
.recordar li a{
display:block;}

.aceptar li a{background:el tick}
 .recordar li a{background:la cruz}

.aceptar li a:hover{background:el tick hover}
 .recordar li a:hover{background:la cruz hover}