Se sprites não forem uma opção, os rollovers CSS podem ter um problema: quando o navegador tenta carregar a imagem do estado de foco, você verá um flash do fundo antes que a imagem seja carregada. Isso ocorre porque o navegador está carregando a imagem conforme ela é solicitada. O que precisamos fazer é pré-carregar a imagem.
Para obter rollovers CSS super simples que pré-carregam a segunda imagem, você só precisa da seguinte marcação HTML:
<a href="http://www.wearesmile.com" alt="SMILE" class="rollover"><span></span></a>Então, para o CSS, adicionamos o estado padrão (que é o <span>):
a.rollover span {
background-image:url('/assets/happy-kitten.jpg');
width: 100%;
height: 100%;
display: block;
}A largura e a altura devem ser definidas como 100%, o que irá expandi-lo para aquele do elemento pai, então se você precisar fazer uma edição, você só precisará definir um conjunto de dimensões. A declaração de exibição também fará mais sentido, uma vez que estilizamos o elemento pai com as dimensões reais.
Depois disso, precisamos adicionar o estado de foco usando:
a.rollover {
background-image: url (‘/ assets / happy-kitten.jpg’);
altura: 100px;
largura: 100px;
display: bloco;
}
Você notará que também adicionamos as dimensões do rollover e a declaração de exibição para garantir que seja tratado como um elemento de bloco que aderirá às dimensões que definimos.
Então, a mágica é fornecida por um último pedaço de CSS:
a.rollover span:hover {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}Isso significa que quando o usuário passa o mouse sobre a extensão, ela se torna transparente (por meio de uma transição CSS3 para criar o efeito de esmaecimento), deixando a imagem de fundo do elemento pai visível. Se você precisar modificar o rollover, tudo, exceto o link, pode ser controlado de dentro do seu CSS.
E como as imagens de fundo de ambos os elementos são carregadas no carregamento da página, não há flashes do fundo!