Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/09/2014, 11:42
Xetori
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años
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..