Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con rollover y sprites

Estas en el tema de Problema con rollover y sprites en el foro de CSS en Foros del Web. Buenas dias/tardes/noches. Estoy maquetando una web y me encuentro con un problema al hacer un rollover con sprites. Es la primera vez que lo estoy ...
  #1 (permalink)  
Antiguo 23/09/2013, 19:51
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 5 años, 6 meses
Puntos: 14
Problema con rollover y sprites

Buenas dias/tardes/noches. Estoy maquetando una web y me encuentro con un problema al hacer un rollover con sprites. Es la primera vez que lo estoy aplicando, y me estoy guiando de esta web: http://librosweb.es/css_avanzado/cap...y_sprites.html (perdón si es spam).
Aplicando código de la manera que esta pagina lo plantea:

Código:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1"><img src="imagenes/pixel.gif" /> Localidad 1: soleado, máx: 35º, mín: 23º</p>
<p id="localidad2"><img src="imagenes/pixel.gif" /> Localidad 2: nublado, máx: 25º, mín: 13º</p>
<p id="localidad3"><img src="imagenes/pixel.gif" /> Localidad 3: muy nublado, máx: 22º, mín: 10º</p>
<p id="localidad4"><img src="imagenes/pixel.gif" /> Localidad 4: tormentas, máx: 23º, mín: 11º</p>
Código:
#localidad1 img, #localidad2 img, #localidad3 img, #localidad4 img {
  height: 32px;
  width: 32px;
  background-image: url("imagenes/sprite2.png");
  background-repeat: no-repeat;
  vertical-align: middle;
}
 
#localidad1 img {
  background-position: 0 0;
}
#localidad2 img {
  background-position: -32px 0;
}
#localidad3 img {
  background-position: 0 -32px;
}
#localidad4 img {
  background-position: -32px -32px;
}
Obtengo un buen resultado, el problema esta al intentar aplicarle un :hover. Mi duda es que no se como aplicarle el :hover al trabajar sobre las img.
Quiero destacar, que yo no estoy trabajando con párrafos, si no con una lista con enlaces dentro.
Me podrían echar alguna mano en esto por favor?
Desde ya les agradezco. Saludos

Pd: Estoy trabajando en local así que no tengo la web subida aun.
  #2 (permalink)  
Antiguo 24/09/2013, 01:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años, 1 mes
Puntos: 2109
Respuesta: Problema con rollover y sprites

Sino estás utilizando ese código, mejor que pongas el código que estás usando.

¿Dónde quieres realizar el :hover? Al pasar por el ratón por tal sitio y que afecte a tal cosa, digo.
  #3 (permalink)  
Antiguo 24/09/2013, 10:09
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 5 años, 6 meses
Puntos: 14
Respuesta: Problema con rollover y sprites

Tienes razón, antes que nada esta es la imagen que estoy usando:
Y asi es como me queda:
El resultado hasta ahí es el deseado, ahora, quiero que al pasar el ratón por cada icono cambie al icono naranja. Hasta ahí se como hacerlo con background-position. Mi problema radica en como aplicar el :hover para tal fin.

Este es mi código actual:

Código HTML:
Ver original
  1. <div class="right">
  2.                 <h2>Redes Sociales</h2>
  3.                 <ul class="social">
  4.                     <li id="facebook" ><a href="#" ><img src="images/pixel.gif"/></a></li>
  5.                     <li id="linkedin" ><a href="#" ><img src="images/pixel.gif"/></a></li>
  6.                     <li id="twitter" ><a href="#" ><img src="images/pixel.gif"/></a></li>
  7.                 </ul>
  8.                
  9.             </div>

Código CSS:
Ver original
  1. .right .social{
  2.     list-style:none;
  3.     text-align:center;
  4.     padding:10px;
  5. }
  6.  
  7. #facebook img, #linkedin img, #twitter img{
  8.      background: transparent url('../images/social_icons.png') no-repeat;
  9.      height:70px;
  10.      width:70px;
  11.      vertical-align:middle;
  12. }
  13. #facebook img {
  14.  
  15. background-position:0 0;
  16.  
  17.    
  18. }
  19. #linkedin img{
  20.  
  21. background-position:-70px 0;
  22.  
  23.  
  24. }
  25.  
  26. #twitter img {
  27.  
  28. background-position:-140px 0;
  29.  
  30.  
  31. }
  32.  
  33.  
  34. .social li {
  35.  
  36.  
  37.     display:inline;
  38.  
  39. }

Gracias por responder.
  #4 (permalink)  
Antiguo 24/09/2013, 11:12
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 5 años, 6 meses
Puntos: 14
Respuesta: Problema con rollover y sprites

Ya lo solucione, solo le puse el :hover en la img, lo había intentando antes y no me había funcionado. Parece ser estaba haciendo algo mal.
  #5 (permalink)  
Antiguo 24/09/2013, 13:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años, 1 mes
Puntos: 2109
Respuesta: Problema con rollover y sprites

Ok. ¿Y no sería más correcto hacer el :hover sobre el elemento de la lista?

Código CSS:
Ver original
  1. li:hover img {
  2.   background-position: //etc
  3. }
  #6 (permalink)  
Antiguo 25/09/2013, 10:01
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 5 años, 6 meses
Puntos: 14
Respuesta: Problema con rollover y sprites

Estoy de acuerdo, ya lo he corregido y he aplicado el :hover sobre el elemento de la lista. Gracias pzin. Saludos.

Etiquetas: hover, sprites
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 02:36.