Gerardo tienes razón disculpá, cometí un error; las etiquetas van anidadas ,
no una a continuación de la otra.
También me di cuenta que no funciona cuando las etiquetas anidadas son 2
enlaces, pero si con otras etiquetas.
Este código está probado:
<style>
#barra_1 .a1:hover h2 {color: red;}
#barra_1 .a2:hover h2 {color: red;}
</style>
<ul id="barra_1">
<li><a class="a1" href="link_1">texto_1<h2 class="a3">imagen_1</h2></a></li>
<li><a class="a2"href="link_2">texto_2<h2 class="a4">imagen_2</h2></a></li>
</ul>
Esta opción se vuelve bastante interesante cuando la etiqueta interna (en
este caso h2) la posicionas de forma absoluta y luego la mueves al punto de
la página que quieras; o con la propiedad display.
Hace poco buscando me topé con esto:
http://www.grafikas.es/web_apuntes/galerias.htm
Hice varias pruebas pero nunca con dos enlaces; parece que no funciona.
Ahora tal vez puedas entender por donde va mi pregunta. Saludos!!!
El 26 de febrero de 2011 12:13, jorge adrian gonzalez
<jorge...@gmail.com>escribió:
> 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
