2009-11-25 11 views
44

Tengo una lista desordenada que estoy usando para un menú. Cada elemento tiene una imagen de fondo y una: imagen de desplazamiento. La imagen de fondo en el primer elemento es diferente que el resto, por lo que la siguiente manera para diseñarlo, que trabaja muy bien:Cómo combinar: primer hijo y: hover?

#prodNavBar ul:last-child li:first-child {...} 

Ya que quiero una imagen de vuelco en este elemento, así, no tengo intentó añadir :hover, así:

#prodNavBar ul:last-child li:first-child:hover {...} 

... pero esto no funciona. ¿Cuál es la sintaxis para combinar :first-child y :hover?

+2

Por el amor de Pete puso una clase o ID en esa UL en prodNavBar - una gran cantidad de su base de usuarios no lo verá funcionar correctamente también conocido como noobs aka los que hacen clic en los anuncios aka los usuarios de IE –

+0

Sí, ya que tengo que poner una clase en el primer elemento para que funcione en IE, también puedo usar el nombre de la clase y olvidarme de este negocio de primer hijo. –

+0

Si necesita funcionar en IE6, de hecho está mejor con clases simples. – stephenhay

Respuesta

33

Enlazando :first-child y :hover como lo hace aquí debería funcionar bien. Sin embargo, si usa IE6, solo se reconocerá la última pseudoclase de la cadena.

En otras palabras, lo está haciendo bien.

+1

first-child no funciona en IE de todos modos. – ScottE

+1

Pensé que era un hecho. – stephenhay

+3

'li: hover' no funciona en IE6 tampoco ... –

11

li:first-child:hover debería funcionar. ¿Con qué navegador estás probando? IE no admite last-child

Here es un caso de prueba de muestra.

+2

': last-child' solo no funciona en IE8 y versiones anteriores. Funciona en IE9 + perfectamente bien. – kleinfreund

Cuestiones relacionadas