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.