Re: [Ovillo] Mostrar estilos en una etiqueta a pasar el mouse por otra etiqueta de tipo enlace
Lo más lógico sería tener solo una barra con el ancho de las dos, colocar
los enlaces y darles la imagen de fondo con el comportamiento que quieras.
* margin:0; padding0;
ul#barra {height: 100px; list-style:none;}
ul#barra li.a1, ul#barra li a.2{height:50px; line-height:50px; padding: 0
10px 50px 10px; }
ul#barra li.a1{color#000; background:url(a1.png)bottom left no-repeat;}
ul#barra li.a2{color#000; background:url(a1.png)bottom left no-repeat;}
ul#barra li.a1:hover{ color:#777; background:url(a1.png)bottom right
no-repeat;}
ul#barra li.a2:hover{ color:#777; background:url(a3.png)bottom right
no-repeat;}
Texto 1
Texto 1
Si te fijas el fondo en una es a la izquierda y por encima a la derecha...
es una imagen que contiene los dos comportamientos, ocuparía justo el doble
(100px de largo x 50px de ancho, pero solo se mostrará una de las dos
opciones).
Espero que te resulte de utilidad, sino en internet encontrarás mil
tutoriales... o alguien dará otra alternativa.
--
Salu2,
Eloi E.
www.estudi1073.com
___
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
Re: [Ovillo] Mostrar estilos en una etiqueta a pasar el mouse por otra etiqueta de tipo enlace
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:
#barra_1 .a1:hover h2 {color: red;}
#barra_1 .a2:hover h2 {color: red;}
texto_1imagen_1
texto_2imagen_2
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
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í.
>
>
> texto_1
> texto_2
>
>
>
> imagen_1
> imagen_2
>
>
> #barra_1 a.a1:hover a.a3 {
> background: url("ruta_imagen");
> }
>
>
> Se bien que asi no funciona. Para que el estilo funcione se hace esto:
>
>
> texto_1 href="link_1">imagen_1
>
> texto_2 href="link_2">imagen_2
>
>
> 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
Re: [Ovillo] Mostrar estilos en una etiqueta a pasar el mouse por otra etiqueta de tipo enlace
El código que has pasado no hace nada http://www.treeweb.es/ShareCode/5adaed9ed34e1066c64db4d2bfbfdc5d ___ 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
[Ovillo] Mostrar estilos en una etiqueta a pasar el mouse por otra etiqueta de tipo enlace
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í.
texto_1
texto_2
imagen_1
imagen_2
#barra_1 a.a1:hover a.a3 {
background: url("ruta_imagen");
}
Se bien que asi no funciona. Para que el estilo funcione se hace esto:
texto_1imagen_1
texto_2imagen_2
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
