Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Dejar elemento:hover activo

Estas en el tema de Dejar elemento:hover activo en el foro de CSS en Foros del Web. Hola gente de Foros del Web, espero puedan ayudarme en algo de CSS que aún no entiendo, veamos. Tengo una barra de menú y un ...
  #1 (permalink)  
Antiguo 03/07/2015, 20:04
 
Fecha de Ingreso: julio-2014
Mensajes: 5
Antigüedad: 5 años, 4 meses
Puntos: 1
Dejar elemento:hover activo

Hola gente de Foros del Web, espero puedan ayudarme en algo de CSS que aún no entiendo, veamos.

Tengo una barra de menú y un elemento de ahí es despegable, cuando pongo el cursor encima de ese elemento, se cambia de color y salen los submenús, pero ahora muevo el cursor encima de un submenú y se desactiva el elemento ":hover" del menú, y se desactiva el cambio del color del menú.

Si no se entendió aquí dejo las dos imágenes de lo que pasa:
Ahí tengo el cursor arriba del menú.


Y acá el mouse sobre un submenú y se desactiva el hover del menú.



Estoy intentando hacer que se quede activo pero no lo logro. El siguiente es mi código html del menú:

Código:
<ul class="navMenu" style="float: right;">
	<a href="index.html"><li class="select">INICIO</li></a>
	<a href="portafolio.html"><li>PORTAFOLIO</li></a>
	
	<li><a href="#">PAQUETES</a>
		<ul>
			<li><a href="#">PAQUETE SILVER</a></li>
			<li><a href="#">PAQUETE GOLD</a></li>
			<li><a href="#">PAQUETE PREMIUM</a></li>
		</ul>
	</li>
	
	<a href="#"><li>CONTACTO</li></a>
</ul>
Intenté el siguiente código pero no me dio resultado alguno:
Código:
#menu > ul > li > ul > li > a:hover ~ #menu > ul > li > a
{
	background-color: #02b1f4;
	color: #FFF;
	border-radius: 0px;
}
Tenía entendido que si paso el cursor por "#menu > ul > li > ul > li > a:hover" entonces a "#menu > ul > li > a" le iba a modificar el estilo puesto. Pero creo que no xD.

Si es posible que me ayuden porfavor sería de mucha ayuda, saludos!
  #2 (permalink)  
Antiguo 03/07/2015, 22:15
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 5 años
Puntos: 207
Respuesta: Dejar elemento:hover activo

Antes que nada, está mal estructurado el menú.. el orden es ul > li > a, y si te fijas en algunos lo tenes asi ul > a > li
Código HTML:
Ver original
  1. <nav>
  2.   <ul>
  3.     <li><a href="#">Item</a></li>
  4.     <li><a href="#">Item</a></li>
  5.     <li><a href="#">Item</a></li>
  6.     <li><a href="#">Item</a></li>
  7.   </ul>
  8. </nav>

Ahora, tu problema está en que el hover está hecho en el enlace y no en el item de lista.

A ver si me puedo explicar, tenes un hover en el enlace.. hasta ahí todo perfecto, pasas el mouse y funciona.
Tu submenu está dentro del <li>, pero no dentro del enlace, por lo que si el cursor lo posicionas sobre el submenu, quitas el hover del elemento <a>.. en cambio si el hover estuviera aplicado al item de lista, al posicionar el cursor sobre el submenu, seguís estando sobre el item de lista y así se mantiene el hover.

Creo que se entiende, espero que te sirva.

Saludos

Edito:

Agrego 2 ejemplos para que lo veas funcionando..

Esto es lo que tenés vos:

http://codepen.io/fede5426/pen/rVJEep

Y así debería funcionar:

http://codepen.io/fede5426/pen/qdxzNJ

La desventaja es que el enlace no funcionaría clickeando en cualquier parte del elemento resaltado sino que solamente funciona clickeando el texto.

Otra forma que podés usar es con javascript indicar que al hacer hover en el submenu, el elemento <a> tome una clase .activo por ejemplo, y al quitar el mouse que se quite la clase..

Código CSS:
Ver original
  1. .activo{
  2.     background-color:#02b1f4;
  3.     color:#fff;
  4. }

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     $(".submenu-paquetes").hover(
  4.        
  5.         function(){
  6.             $(".paquetes").addClass("activo");
  7.         },
  8.        
  9.         function(){
  10.             $(".paquetes").removeClass("activo");  
  11.         }
  12.         );
  13.  
  14. });

Funcionando: http://codepen.io/fede5426/pen/BNYgLo

Otra forma no se me ocurre

Saludos!

Última edición por fede5426; 03/07/2015 a las 22:45
  #3 (permalink)  
Antiguo 04/07/2015, 01:47
 
Fecha de Ingreso: julio-2014
Mensajes: 5
Antigüedad: 5 años, 4 meses
Puntos: 1
Respuesta: Dejar elemento:hover activo

¡Fenomenal amigo! Lo he entendido todo perfectamente :D, excelente explicación, muchas gracias :D, ya ha quedado perfectamente perfecto, válgame la redundancia jaja, muchas gracias por su explicación y tiempo, saludos!

Etiquetas: activo, background, color, dejar, float, html
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 10:50.