Hola a todos:
Les consultaba por una duda. Tengo una barra de navegación con 6 items.
A su vez más abajo tengo otra barra con dibujos que son los mismos links que
arriba pero sólo imagen sin texto.
Lo que me pidieron es que al pasar por los link de la primera barra en la
segunda cambie el color del icono de la (segunda barra) que lleva al mismo
link.
La cuestión es que puedo lograrlo posicionando una etiqueta dentro de otra y
luego al icono que muestra la imagen
lo posiciono de manera absoluta y logro el efecto así.
<ul id="barra_1">
<li><a class="a1" href="link_1">texto_1</a></li>
<li><a class="a2"href="link_2">texto_2</a></li>
</ul>
<ul id="barra_2">
<li><a class="a3" href="link_1">imagen_1</a></li>
<li><a class="a4" href="link_2">imagen_2</a></li>
<style>
#barra_1 a.a1:hover a.a3 {
background: url("ruta_imagen");
}
</style>
</ul>
Se bien que asi no funciona. Para que el estilo funcione se hace esto:
<ul id="barra_1">
<li><a class="a1" href="link_1">texto_1</a><a class="a3"
href="link_1">imagen_1</a></li>
<li><a class="a2"href="link_2">texto_2</a><a class="a4"
href="link_2">imagen_2</a></li>
</ul>
Luego se posicionan las clases a3 y a4 de forma absoluta. Lo que quería
saber es si era posible mantener la estructura de las 2 listas separadas y
que funcione sin usar javaScript. (Es lo que me pidieron).
¿Tienen alguna sugerencia?
Desde ya muchas gracias!!! Jorge
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
