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.
html
head
style
* 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;}
/style
/head
body
ul id=barra
lia class=a1Texto 1/a/li
lia class=a2Texto 1/a/li
/ul
/body
/html
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
[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í.
ul id=barra_1
lia class=a1 href=link_1texto_1/a/li
lia class=a2href=link_2texto_2/a/li
/ul
ul id=barra_2
lia class=a3 href=link_1imagen_1/a/li
lia class=a4 href=link_2imagen_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
lia class=a1 href=link_1texto_1/aa class=a3
href=link_1imagen_1/a/li
lia class=a2href=link_2texto_2/aa class=a4
href=link_2imagen_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
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
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:
style
#barra_1 .a1:hover h2 {color: red;}
#barra_1 .a2:hover h2 {color: red;}
/style
ul id=barra_1
lia class=a1 href=link_1texto_1h2 class=a3imagen_1/h2/a/li
lia class=a2href=link_2texto_2h2 class=a4imagen_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.comescribió:
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
lia class=a1 href=link_1texto_1/a/li
lia class=a2href=link_2texto_2/a/li
/ul
ul id=barra_2
lia class=a3 href=link_1imagen_1/a/li
lia class=a4 href=link_2imagen_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
lia class=a1 href=link_1texto_1/aa class=a3
href=link_1imagen_1/a/li
lia class=a2href=link_2texto_2/aa class=a4
href=link_2imagen_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
