[SOLUCIONADO] Mantener evento hover en cada seccion

[Xetori]

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..

[BaSingSe]

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:

#Boton1:active {
    color:orange;
}
 

[Xetori]

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.

[siddartha23]

Iniciado por Xetori

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???

[Xetori]

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.

[siddartha23]

Entonces crea un script que le quite la clase .btnactivo cuando vuelvas al menu

[Xetori]

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