15.10. Ejercicio 10

Modificar el menú vertical sencillo para que muestre el siguiente comportamiento:

  1. Los elementos deben mostrar una imagen de fondo (flecha_inactiva.png):
    Menú vertical con imagen de fondo

    Figura 15.13. Menú vertical con imagen de fondo

  2. Cuando se pasa el ratón por encima de un elemento, se debe mostrar una imagen alternativa (flecha_activa.png):
    Menú vertical con imagen de fondo alternativa

    Figura 15.14. Menú vertical con imagen de fondo alternativa

  3. El color de fondo del elemento también debe variar ligeramente y mostrar un color gris más oscuro (#E4E4E4) cuando se pasa el ratón por encima:
    Menú vertical con imagen de fondo y color alternativos

    Figura 15.15. Menú vertical con imagen de fondo y color alternativos

  4. El comportamiento anterior se debe producir cuando el usuario pasa el ratón por encima de cualquier zona del elemento del menú, no solo cuando se pasa el ratón por encima del texto del elemento:
    Aspecto final del menú vertical avanzado creado con CSS

    Figura 15.16. Aspecto final del menú vertical avanzado creado con CSS

Descargar archivo comprimido con la página HTML y las imágenes

Ver solución

Puedes sugerir, comentar, criticar e informar de errores en contacto (arroba) librosweb.es
« Anterior
15.9. Ejercicio 9
Siguiente »
15.11. Ejercicio 11
Los contenidos originales de este sitio están bajo una licencia de Creative Commons. Las traducciones disponen cada una de su propia licencia.