Foros del Web - mover solo eje (y) y conservar (x) con bacground-position

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - mover solo eje (y) y conservar (x) con bacground-position (http://www.forosdelweb.com/f53/mover-solo-eje-conservar-x-con-bacground-position-877837/)

mover solo eje (y) y conservar (x) con bacground-position

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

Respuesta: mover solo eje (y) y conservar (x) con bacground-position

¿Por qué no un selector .item0.activo, .item1.activo, .item2.activo?
Bueno, en realidad sería muy parecido a usar activo1, activo2,...

Sin usar JavaScript no se me ocurre otra forma.

Respuesta: mover solo eje (y) y conservar (x) con bacground-position

Hola sanxuan muchas gracias por tu comentario,

y en efecto item2.activo resulta lo mismo que crear activo1, activo2,....

mi idea era mas para ahorrar lineas de código que la dificultad de crear las clases...
por ahora lo he creado las clases y dejado en:

Código CSS:

Ver original.item2{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -333px 0;}
.item2:hover,.activo2{background-position: -333px -79px;}

pero va sigue abierta la pregunta por si alguien llegase a saber como modificar solo uno de los ejes y no forzosamente tener que declarar ambos

Respuesta: mover solo eje (y) y conservar (x) con bacground-position

Completo mi intervención.
Hay propiedades background-position-x y background-position-y... pero no forman parte del standard. No están soportadas en todos los navegadores.

Otra solución que se me ha ocurrido que puedas haber dejado pasar sin darte cuenta de ello:
si usas las constantes left, right, top o bottom junto a background o background-position no necesitarías dar los dos valores para estas propiedades.
Se puede usar background-position:top por ejemplo. Quizás te pueda servir.