¿Cómo cambio el color de fondo de un ul al pasar el mouse por uno de los li que tiene

[LordYo]

¡Buenas noches desde España!

Para el menú de navegación de una página que estoy haciendo, tengo una lista desordenada, o sea, un <ul>, dentro de la cuál tengo varios <li> y me gustaría que, AL PASAR EL MOUSE POR ENCIMA del <li> cambie el color, no sólo del fondo del propio <li> y del texto del <a> que contiene dicho <li> (que ya lo tengo), sino TAMBIÉN el color de fondo del <ul> que los contiene a todos.

Espero que se entienda bien lo que quiero. A ser posible, con CSS, evidentemente.

Digo esto por si me responde alguien que lo haga con javascript. Porque como siempre hay alguien que NO lo tiene activado (hasta hay navegadores a propósito para no usar javascript, si no recuerdo mal) pues eso... Y si no se puede, pues con javascript, supongo o jquery... que los tengo un-poco-bastante-olvidados. Porque con PHP, lo dudo... Si acaso, AJAX...

¡Gracias por adelantado!

[AitorDB]

Creo recordar que esto no es posible sin usar javascript ya que <li> esta dentro de <ul>, si fuera al contrario si se podría. Usando javascript te vas a ahorrar mucho quebraderos de cabeza para hacer ese tipo de cosas con CSS, me paso lo mismo hace tiempo y desistí de no usarlo.

Si ves que necesitas ayuda con lo de javascript avisa y te paso los codigos encantado.
Suerte!

[Alexis88]

Bueno, primero aclarando que jQuery es una librería de JavaScript y que Ajax es una técnica de JavaScript, de modo que al referirte a alguno de ellos, estarás haciéndolo acerca de JavaScript. Definitivamente PHP no tiene nada que ver acá pues es un lenguaje que trabaja del lado del servidor y lo que buscas hacer se ejecutará en el lado del cliente. Aclarado esto, vamos a lo que necesitas.

Lamentablemente, aún no hay forma de afectar a un elemento ancestro, es decir, un elemento hijo no puede afectar al elemento padre (el que lo contiene) mediante alguna pseudo-clase, que en este caso sería :hover. Solamente puedes afectar a elementos hermanos y al propio elemento. Y pues, acertaste, con JavaScript sí puedes hacerlo. Habrá que esperar a CSS4 para poder hacer esto o bien podrías utilizar algún artilugio. Pide que muevan tu tema al foro de JavaScript para ayudarte.

Saludos

[pzin]

Uhmm... Igual te vale así, depende del diseño:

Código CSS:

ul:hover {
  background: blue;
}
 
li:hover {
  background: red;
}
 
li:hover a {
  color: green;
}
 

Aclaro que CSS3 no existe, al igual que no existirá CSS4. El 3 y el 4 suelen ser referencias a los niveles de los módulos —selectores en este caso.

[LordYo]

Bueno, en realidad, es un poco lioso como lo tengo hecho, pzin... No me aclaro. Igual un fin de semana sin ver el código me ayudaría bastante. Porque seguro que no es difícil de aplicar a mi css... Pero cuando me bloqueo, me bloqueo de verdad. Y otras veces, cosas más difíciles las soluciono "en cero coma", como dicen muchos que conozco (o sea, relativamente rápido)... ¡No lo entiendo!

Lo más que he conseguido ha sido cambiar el color a otro ul... Concretamente, al UL que contiene el submenú de ese li. Ya lo he borrado porque no era lo que quería, evidentemente.

De todos modos, eso con lo que había cambiado el ul que no quería lo había hecho así:
(#principal es la etiqueta <nav>)

Código:

#principal > ul > li:hover ul

O algo parecido... ya no me acuerdo. Quizá esto:

Código:

#principal > ul > li:hover #principal > ul

En fin... No sé... quizá lo mejor sea hacerlo con Javascript. Sí sabía que JQuery es una librería o algo así de Javascript. Lo de Ajax, sabía que era una especie de conbinación... que usa algo de Javascript... pero no lo entendía bien...

Además, con javascript o con su librería JQuery me podría ahorrar código CSS que, probablemente, tenga más fácil solución y no quede hecho tan "cutre" y rudimentario como lo tengo. Como que al pasar el mouse por el LI o por A se comporten de la misma manera. Es decir, como un puntero. Y que aparezca en la barra de información (la barra de estado, que por cierto, he visto que mucha gente no puede cambiarlo en firefox) la misma dirección url tanto al pasar el mouse por el a como al pasarlo cerca del a(en el li que contiene al a) Y que, tanto si se hace click en el a como en el li, visite dicha url... Para eso sólo se hacerlo a mi manera. Tratando de hacer que, mediante el padding del a rellene el tamaño del li. Lo dicho: al estilo rudimentario/cutre... Me ahorraría muchísimo tiempo. Fijo.

Pero bueno, eso es otra historia. Por otro lado, los artilugios que mencionas, Alexis88, me vendrían genial. Sobre todo el segundo... Pero me lío, no sé por qué. Parece sencillo. De momento, me guardo en favoritos ese artilugio... Trataré de implementarlo. Pero, hasta entonces, no me vendría mal probar con javascript o lo que sea.

¿Cómo pido que me lo cambien de foro al de javascript?

Una vez que esté cambiado... ¿podrías pasarme esos códigos que mencionas, AitorDB, allí?

¡Muchas gracias a todos! :)

[AitorDB]

Si, ahora lo busco y te lo paso o sino te lo escribo, de todas formas, ¿por qué no pasas una imagen de lo que quieres hacer o lo que tienes y nos explicas cómo quieres que quede? Seguro que así podemos encontrar más soluciones y que a lo mejor te convienen más para tu caso.

Saludos!

[LordYo]

Iniciado por AitorDB

Si, ahora lo busco y te lo paso o sino te lo escribo, de todas formas, ¿por qué no pasas una imagen de lo que quieres hacer o lo que tienes y nos explicas cómo quieres que quede? Seguro que así podemos encontrar más soluciones y que a lo mejor te convienen más para tu caso.

Saludos!

¡Ufff! Son taaantas cosas las que quiero!

Pero bueno, en primer lugar, como suele ser un "clásico", cuando está seleccionada una opción, ésta queda de un color distinto. Bien, pues al pasar el ratón por un submenú, quiero que se el submenú seleccionado cambie PERO el menú que le precede permanezca igual. Al decir el menú, me refiero tanto al cambio del li como al cambio del a aunque ya no esté en el a ni en el li propiamente.

Cierto que tanto el li como el a como el ul que los contiene están dentro del propio li antecesor. Pero al bajar hacia uno de los submenúes se me quita el color del a principal (vamos, que se pone como al principio...) pero NO se me cambia el li principal (porque, de algún modo, sigue estando dentro del li) y como lo que hago es invertir los colores, se me quedan los dos con el mismo color y no se ve)

También quiero que cambie el fondo del principal al pasar el ratón por uno de los li principales y vuelva a su color original cuando esté ya seleccionando algún elemento del submenú. Ya sea el ul, uno de los li o de los a. Y que cuando esté en un li o en un a del submenú, el que cambie sea el ul del submenú.

Lo sé... algo similar está en uno de los "artilugios" que me ha enlazado Alexis88... Pero ya he dicho que estoy bloqueado. Y la explicación está en inglés y no es que no entienda el inglés, pero en ciertas cosas, los tecnicismos linguísticos pueden ser muy liosos si tanto dichos tecnicismos como la explicación en sí está en inglés y uno no es un gran experto... Y más, estando con este "bloqueo" que tengo.

Esa sólo es una de las cosas que quiero..

Sé que una vez logré yo mismo, hace tiempo, algo parecido a eso (menos el cambio del ul, evidentemente) Supongo que fue "de chiripa".

A todas estas, no se me ha movido aún... A ver si se me van a mosquear por seguir hablando de otras cosas...

Aquí hay un par de imágenes, que se me olvidaba:





Las imágenes están en el código pero no se ven... las pongo fuera del código:

¡Saludos!

[pzin]

A mi personalmente me cuesta leer tus mensajes, porque son muy liosos e invitan poco a imaginarse las cosas.

Cierto que tanto el li como el a como el ul que los contiene están dentro del propio li antecesor. Pero al bajar hacia uno de los submenús se me quita el color del a principal (vamos, que se pone como al principio...)

Pero este problema es muy fácil de resolver. ¿Cómo lo tienes puesto? Seguramente algo tipo a:hover, pues lo que tendrías que hacer es li:hover a. Tal vez no te expliques bien y todo tu problema sea ese, de poner bien el selector y no tengas necesidad de ir seleccionando a contenedores…

Voy a arreglarte las imágenes del mensaje. Cuando tengas 30 mensajes y 30 días de registros funcionará lo de poner enlaces, imágenes y demás…

[siddartha23]

Iniciado por LordYo

... probablemente, tenga más fácil solución y no quede hecho tan "cutre" y rudimentario como lo tengo. Como que al pasar el mouse por el LI o por A se comporten de la misma manera. Es decir, como un puntero. Y que aparezca en la barra de información (la barra de estado, que por cierto, he visto que mucha gente no puede cambiarlo en firefox) la misma dirección url tanto al pasar el mouse por el a como al pasarlo cerca del a(en el li que contiene al a) Y que, tanto si se hace click en el a como en el li, visite dicha url... Para eso sólo se hacerlo a mi manera. Tratando de hacer que, mediante el padding del a rellene el tamaño del li. Lo dicho: al estilo rudimentario/cutre... Me ahorraría muchísimo tiempo. Fijo....

Vamos que hacer esto que pides es muy simple con CSS, solo tienes que añadirle una propiedad a tus links: a{display:block}, con esto el link ocupa todo el espacio que tenga disponible, es decir, todo el li donde se encuentre metido...

[Linton]

¿Quieres hacer algo como esto?

Lo tienes explicado aquí paso a paso. Fíjate en los selectores, como señala Pzin.

Saludos.

[LordYo]

Bueno, a decir verdad, no era exactamente lo que buscaba, pero se le parece bastante más ya, Linton.

Ayer intenté hacer que se pareciera más a cómo lo quería yo (entre otras cosas, que tuviese el mismo tamaño el menú como el submenú... Manías, supongo... )

Y que los elementos del menú principal, bueno, y del submenú, estuviesen en una línea. Nada de que se corte el título del menú y aparezca una palabra arriba y la otra debajo y tal (me pasaba porque eran títulos de varias palabras... y no quiero que pase... Nuevamente... ¡Manías! )

Me costó lo suyo y más. Así qué, supongo que me puedo dar por satisfecho y usarlo como una de las plantillas, para que el usuario de la página use la que más le guste.

La otra, sigue siendo de un estilo muy distinto. Menos elegante. Más "colorido", como en las imágenes que subí. En el cuál, todos los elementos son visibles y cada uno a su manera... y unos interactúan con los anteriores (con Javascript, supongo)... Sólo son temas...

Otra manía que tengo es que se vea siempre proporcional al tamaño de pantalla y/o resolución (quizá es una mala manía), por lo que tiendo a intentar hacerlo todo CASI SIEMPRE en porcentajes. Algunas cosas no aceptan porcentajes, y lo hago en píxeles... Esa manía lo complica mucho más todavía. Así me modificado el código de esa elegante barra de navegación...

En fin, sí que me ha servido. Y me servirá para crear nuevos estilos... seguro.

¡Muchísimas gracias a tod@s por vuestra enooooorme paciencia!

[LordYo]

Iniciado por pzin

A mi personalmente me cuesta leer tus mensajes, porque son muy liosos e invitan poco a imaginarse las cosas.



Pero este problema es muy fácil de resolver. ¿Cómo lo tienes puesto? Seguramente algo tipo a:hover, pues lo que tendrías que hacer es li:hover a. Tal vez no te expliques bien y todo tu problema sea ese, de poner bien el selector y no tengas necesidad de ir seleccionando a contenedores…

Voy a arreglarte las imágenes del mensaje. Cuando tengas 30 mensajes y 30 días de registros funcionará lo de poner enlaces, imágenes y demás…

Sí. Es muy probable que no me explicase bien. Es como que yo sé lo que tengo y doy por hecho, sin querer, que todo el mundo sabe cómo está hecha la estructura básica. Y claro... Luego pasa lo que pasa. :D

Lo siento... Y gracias por subirme las fotos y ponerme la información de por qué no podía y cuándo podré hacerlo.