Hola forer@s
tengo una duda, estoy haciendo un efecto de hover de imagenes a los enlaces, este es el codigo:
Código PHP:
.cajas_icons{
display:inline-block;
width:110px;
height:36px;
margin-left:4px;
}
.cajas_icons a span{ /*el texto del enlace, aparece a un lado de la imagen*/
text-decoration:none;
color:#666;
font-weight:bold;
font-size:11px;
line-height:34px;
margin-left:36px;
}
.cajas_icons a span:hover{
text-decoration:underline;
color:#0b6138;
}
.cajas_icons a{ /* la imagen png contiene arriba el icono en gris y abajo en el color original, solo muestra el de arriba*/
text-decoration:none;
display:inline-block;
width: 32px;
height: 32px;
background: transparent url(images/iconos/facebook-double.png) no-repeat; /*hacer esto generico*/
}
.cajas_icons a:hover { /* muestra la mitad de abajo de la imagen, el icono con el color original */
background-position: 0 -32px;
}
html:
Código HTML:
<div class="cajas_icons">
<a href="#"><span>Correo</span></a>
</div>
<div class="cajas_icons">
<a href="#"><span>Facebook</span></a>
</div>
<div class="cajas_icons">
<a href="#"><span>Twitter</span></a>
</div>
<div class="cajas_icons">
<a href="#"><span>YouTube</span></a>
</div>
<div class="cajas_icons">
<a href="#"><span>Clima</span></a>
</div>
<div class="cajas_icons">
<a href="#"><span>Cumpleaños</span></a>
</div>
<!-- mas enlaces -->
Pero son muchos enlaces y no quiero hacer una clase a cada uno, porque es tedioso, no se presta para darle mantenimiento facil, es decir, los enlaces se cambian seguido y tendria que estar cambiando el html y el css.
Como tengo el codigo ahora a todos los enlaces les sale icono de facebook:
http://s2.subirimagenes.com/imagen/p...2607iconos.png
intente sacando la propiedad background del css y poniendola directo al html con el style"" en cada enlace, si cambia la imagen pero ya no hace el efecto del hover:
<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/correo-double.png) no-repeat;"><span>Correo</span></a>
</div>
<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/facebook-double.png) no-repeat;"><span>Facebook</span></a>
</div>
<div class="cajas_icons">
<a href="#" style="background: transparent url(images/iconos/twitter-double.png) no-repeat;"><span>Twitter</span></a>
</div>
...los demás links
como se podria hacer para que salga a cada enlace su imagen correspondiente sin tener que poner por cada enlace un:
background: transparent url(images/iconos/facebook-double.png) no-repeat;
gracias anticipadas por sus respuestas