buen dia compañeros del foro,
estoy desarrollando un menú donde utilizo sprits para la imagen de background... mi problema surge al necesitarlo totalmente css y no poder usar java o algún lenguaje
veran tengo las siguientes clases...
Código CSS:
Ver original.item0{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -111px 0;}
.item0:hover{background-position: -111px -79px;}
.item1{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -222px 0;}
.item1:hover{background-position: -222px -79px;}
.item2{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -333px 0;}
.item2:hover{background-position: -333px -79px;}
hasta aquí todo perfecto, en el hover muevo la imagen con background position, y al seleccionar un elemento le agrego class="activo" quedando por decir
<li class="item1 activo"> y es aquí donde entra el problema... necesito que la clase activo mueva la imagen de fondo solo en el eje (y) conservando el eje (x) ya declarado en item(n)
alguien sabrá como puedo hacerlo? o necesariamente tendré que crear una clase distinta para cada elemento como activo1, activo2... etc?
Gracias!!!