Foros del Web » Creando para Internet » CSS »

Pestañas con tres estados

Estas en el tema de Pestañas con tres estados en el foro de CSS en Foros del Web. Hola. A ver si se puede hacer lo que estoy buscando. Tengo una web en la que el menú de navegación es horizontal, mediante pestañas. ...
  #1 (permalink)  
Antiguo 15/12/2009, 16:05
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 15 años
Puntos: 20
Pestañas con tres estados

Hola. A ver si se puede hacer lo que estoy buscando. Tengo una web en la que el menú de navegación es horizontal, mediante pestañas. Cada pestaña es un <li> con un <a> dentro. Los <a> tienen la imagen de fondo de cada pestaña.

Código:
<ul id="botonera">

  <li id="pest1_activa">
    <a href="#">Pestaña 1</a>
  </li>
  <li id="pest2">
    <a href="#">Pestaña 2</a>
  </li>
  <li id"=pest3">
    <a href="#">Pestaña 3</a>
  </li>

</ul>
Hasta aquí bien, y ahora es donde se me complica un poco. Cada pestaña tiene 3 imágenes distintas, que voy mostrando según el estado (bueno, en realidad es una imagen con 3 sprites, y voy variando la posición). Primero está el estado normal, luego el estado hover (que es el mismo que para la pestaña activa), y luego hay un tercer estado para la pestaña que queda inmediatamente después de la activa, que tiene una sombrita que le arroja la anterior.

Entonces, si tengo 3 pestañas y elijo la segunda, la cosa quedaría así:
- La primera queda en el estado normal.
- La segunda queda en estado activa.
- La tercera queda en estado "sombra" (la sombra que le arroja la segunda).

Para el estado activo no tengo problema, he usado el selector hermano:

Código:
#botonera li#pest1_activa + li a {
    ...
}
Es decir, si la pestaña 1 está activa, se va al siguiente <li> que sea hijo del mismo <ul>, y luego al <a> que hay dentro.

El problema lo tengo con el hover. La sombra de la siguiente pestaña no sólo tiene que aparecer cuando una pestaña está activa, sino también cuando se pasa el ratón por encima. No puedo usar el selector hermano porque los <a> no son hermanos entre sí (cada uno es hijo de un <li> diferente). ¿Alguien sabe qué selector usar?

Que no despiste lo de la sombra, no estoy buscando un efecto sombra ni nada parecido, lo que busco es cambiar de imagen a la pestaña siguiente a la que le estoy haciendo el hover.

Gracias de antemano y espero no haberme explicado demasiado mal.
  #2 (permalink)  
Antiguo 15/12/2009, 16:39
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Pestañas con tres estados

No estoy seguro de haberte entendio bien pero me voy a arriesgar. Dices que la pestaña activa o con hover arroja una sombra sobre la pestaña de la derecha, y bien ¿no es posible que esa sombra pertenezca a la pestaña en cuestión, es decir que la sombra forme parte de la pestaña que la genera?

Salud!
  #3 (permalink)  
Antiguo 15/12/2009, 16:44
Avatar de mariogl84  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 433
Antigüedad: 15 años
Puntos: 20
Respuesta: Pestañas con tres estados

Me has entendido bien, gracias por responder.

El problema con eso es que la zona clickable de cada pestaña cogería parte de la siguiente, con lo que el comportamiento del ratón en las pestañas no sería el correcto.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:17.