Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Mantener evento hover en cada seccion

Estas en el tema de Mantener evento hover en cada seccion en el foro de CSS en Foros del Web. Buenas tardes, he creado este menu con css, y no consigo encontrar la manera de mantener el efecto hover en cada seccion, para que el ...
  #1 (permalink)  
Antiguo 25/09/2014, 11:42
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años, 8 meses
Puntos: 0
Pregunta Mantener evento hover en cada seccion

Buenas tardes, he creado este menu con css, y no consigo encontrar la manera de mantener el efecto hover en cada seccion, para que el usuario sepa en que seccion se encuentra.

Aqui teneis el menu para verlo: http://menuhorizontal.hostelbizkaia.com/

y el css:

Código:
*{
	margin:0px;
	padding:0px;	
}
.MenuHorizontal {
	width: 100%;
	height: 60px;
	text-align: center;
}
.MenuHorizontal:hover .Text {
	opacity: .2;
}
.Boton {
	width: 25%;
	height: 60px;
	float: left;
	background-color:#333;
	transition: all .4s;
}
#Boton1:hover {
	background-image: url(../Images/Icons/home.png);
	background-position: center 60px;
	background-repeat: no-repeat;
}
#Boton2:hover {
	background-image: url(../Images/Icons/menus.png);
	background-position: center 60px;
	background-repeat: no-repeat;
}
#Boton3:hover {
	background-image: url(../Images/Icons/recetas.png);
	background-position: center 60px;
	background-repeat: no-repeat;
}
#Boton4:hover {
	background-image: url(../Images/Icons/locales.png);
	background-position: center 60px;
	background-repeat: no-repeat;
}
.Boton:hover {
	-webkit-box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
	-moz-box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
	box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
	height: 120px;
}
.Boton:hover .Text{
	opacity: 1;
}
.Text {
	font-size: large;
	transition: all .4s;
	padding-top: 15px;
	color: white;
}
}
Agradezco vuestra ayuda, y si a alguien le gusta el menú, pues ahi lo tiene
Saludos..
  #2 (permalink)  
Antiguo 26/09/2014, 11:02
 
Fecha de Ingreso: mayo-2012
Mensajes: 117
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: Mantener evento hover en cada seccion

Hola, para que se quede activo la opcion que eligas debes usar la :active, :hover es solo para cuando le pasan el mouse por encima y :active es para cuando lo seleccionan..

ejemplo

Código CSS:
Ver original
  1. #Boton1:active {
  2.     color:orange;
  3. }
  #3 (permalink)  
Antiguo 26/09/2014, 16:40
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Mantener evento hover en cada seccion

Buenas, gracias por la respuesta, la propiedad a:active no es lo que pido, esa mantiene los eventos mientras mantienes pulsado el boton/link... lo que quiero es que al recargar la pagina se mantenga el evento hover activo hasta que salga de esa sección.
  #4 (permalink)  
Antiguo 26/09/2014, 19:13
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Mantener evento hover en cada seccion

Cita:
Iniciado por Xetori Ver Mensaje
Buenas, gracias por la respuesta, la propiedad a:active no es lo que pido, esa mantiene los eventos mientras mantienes pulsado el boton/link... lo que quiero es que al recargar la pagina se mantenga el evento hover activo hasta que salga de esa sección.
Y no has probado guadar todas las propiedades del hover en una clase .btncurrent .btnactual .btnactive, etc. y darle la clase a la seccion en el archivo que corresponda???
__________________
velarde23.com - Soluciones Web
  #5 (permalink)  
Antiguo 26/09/2014, 20:07
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Mantener evento hover en cada seccion

Si, tambien lo he probado, pero entonces, al cambiar de seccion, y hacer hover en una nueva seccion, se sigue manteniendo la activa. no se si me explico.
  #6 (permalink)  
Antiguo 27/09/2014, 20:03
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: Mantener evento hover en cada seccion

Entonces crea un script que le quite la clase .btnactivo cuando vuelvas al menu
__________________
velarde23.com - Soluciones Web
  #7 (permalink)  
Antiguo 29/09/2014, 17:51
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Mantener evento hover en cada seccion

Solucionado, al final le puse clase .activo e .inactivo a cada boton en su pagina correspondiente y retocando el css un pokito quedo perfecto. gracias a todos.
os dejo el link de la pagina por si quereis hecharle un vistazo.
www.begoñakobatzokia.com

Etiquetas: background, cada, color, evento, horizontal, hover, seccion, width
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 11:08.