Ao invés de utilizar duas imagens, uma para o link normal e outra para quando o cursor do mouse estiver sobre o link, utilizamos uma só imagem e mostramos só a parte que interessa. Só para testar, podemos criar uma div com o tamanho exato de apenas uma imagem e setar a imagem como seu background:
<html>
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(twitter.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Para criar o efeito rollover basta mover a imagem usando o pseudo-elemento :hover e a propriedade background-position para alterar a posição da imagem em relação ao eixo x:
...
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(twitter.png);
}
div:hover {
background-position: -48px 0px;
}
</style>
</head>
...
A mesma solução pode ser aplicada a outros elementos HTML com sprites maiores, como esse:
Nenhum comentário:
Postar um comentário