Simples rollover em imagens com CSS

Postado por: Pedro Rogério em

Antigamente para se fazer rollover em imagens utilizava-se de JavaScript, utilizando os eventos onMouseOver e onMouseOut, e também de 2 imagens separadas, mas com CSS, você simplesmente precisa de uma só imagem com os 2 estados, ode iremos deslocar a imagem para as coordenadas necessárias para que tenhamos o efeito de rollover. Utilizaremos a seguinte imagem nesse tutorial:

Image Rollover

O CSS:


a.srollover {
    display: block;
    width: 22px;
    height: 22px;
    background: url("pbox_close.gif") 0 0 no-repeat;
    text-decoration: none;
}

a:hover.srollover {
    background-position: -22px 0;
}

Se repararem, a imagem possui 44 pixels de largura, mas no CSS eu só marquei 22 e posicionei a imagem a 0 pixels de sua margem, por que logo após, eu criei uma regra para que a imagem se desloque no eixo X 22 pixels para a esquerda, é onde acontece o efeito de rollover. O HTML fica da seguinte forma:


<a class="srollover" href="#">&nbsp;</a>

Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Gostou desse post?

Assine o nosso Feed RSS, siga-nos no Twitter, ou simplesmente nos recomende a seus amigos!

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

Central Server

15 Responses to “Simples rollover em imagens com CSS”

  1. Micox disse:

    Umm, interessantísima técnica.
    É bom aprender coisas novas diferentes, alternativas.

  2. Olá,

    Não seria, a.srollover:hover ao invés de a:hover.srollover ?

  3. @Lucas

    Das duas formas funcionam corretamente!!!

  4. Leonardo Procópio disse:

    Dessa forma eu nunca tentei não, pra mim so dava pra fazer como o lucas disse.
    Mas é bom saber!!!

  5. Ricardo disse:

    Uma vez fiz um codigo “bunitinho” p/ isso ae, mas usando javascript..

    Que descepção…
    Não consigo achar uma vantagem em usar o Js..

    Idéia muito criativa!!

  6. Para aqueles que se matam para fazer um menu lindo :D essa é a dica perfeita :D

  7. Leonardo disse:

    Interessante a técnica, mas quem não conhecia isso por favor né???
    Isso é muito antigo…

  8. Gostei, pra caramba! poderia ensinar como faz esse efeito nos formulários do seu site!

  9. Rodrigo disse:

    Olá! essa técnica não funciona no SYMBIAM!!!

  10. Rafael disse:

    Nossa, excelente, valeu mesmo.
    Ainda utilizava javascript haha

  11. Social comments and analytics for this post…

    This post was mentioned on Twitter by pinceladasdaweb: Tutorial simples, muito simples sobre CSS Sprites: http://migre.me/gy2O...

  12. Leandro disse:

    tutorial muito bom e facil, me ajudou bastante! valeu

  13. Oscar disse:

    Ola! Gostaria saber como seria o código se eu quiser colocar várias imagens uma do lado a outra tipo “Mural de imagens” com 5 figuras acima e cinco figuras embaixo” .. não sei se deu para entender o que quero fazer.

    Obrigado

Leave a Reply