Tenho uma listagem de ícones de redes sociais, a qual eu sei fazer, não estou aqui para perguntar como fazer, mas sim, uma forma mais correta, para minimizar o meu trabalho, se houver, claro.
Meu HTML está assim:
<ul>
<li class="rodapeTitulos">Redes Sociais</li>
<li class="icoFB"></li>
<li class="icoTT"></li>
<li class="icoIns"></li>
<li class="icoPlu"></li>
<li class="icoPin"></li>
</ul>
Meu CSS:
.icoFB{
background-image: url("../imagens/fb.jpg");
background-repeat: no-repeat;
background-position: center 0;
width: 43px;
height: 43px;
float: left;
margin-right: 1px;
}
.icoFB:hover{background-position: center 43px;}
Ok, com isso, o ícone do Facebook irá mudar a posição da imagem com o efeito Hover. Até ai tranquilo, é só eu fazer esse mesmo processo para cada um deles, icoTT, icoIns...
Gostaria de saber se há alguma forma mais fácil, talvez uma classe que armazene as propriedades que irá se repetir em todas as divs, algo mais ou menos assim:
.icoRodape{
background-repeat: no-repeat;
background-position: center 0;
width: 43px;
height: 43px;
float: left;
margin-right: 1px;
}
.icoRodape.icoFB{background-image: url("../imagens/fb.jpg");}
.icoRodape.icoTT{background-image: url("../imagens/tt.jpg");}
.icoRodape.icoIns{background-image: url("../imagens/inst.jpg");}
.icoRodape.icoPlu{background-image: url("../imagens/gpl.jpg");}
.icoRodape.icoPin{background-image: url("../imagens/pin.jpg");}
.icoRodape:hover{background-position: center 43px;}
Ok, isso não está correto, só para dar um exemplo mesmo. Há alguma forma de minimizar meu trabalho e o código?