EFEITO DE MOUSEOVER USANDO CSS

links patrocinados

Reunimos aqui alguns sites úteis para quem deseja trabalhar com efeitos baseados em mouseover (passar o mouse sobre algum elemento do site).

CSS+JavaScript Fancy Menu
Solução utilizando css e javascript para criar um bonito menu horizontal. Uma imagem transparente desliza pelo menu até encontrar a seta do mouse. Lembra um menu feito em flash.

qTip – CSS Tooltips
Desenvolvido em javascript. Mostra uma caixa de texto com dicas quando a pessoa passa o mouse sobre um link. Veja um exemplo passando o mouse sobre os links vermelhos.

Sliding Doors of CSS – A List Apart
Mostra detalhes de como desenvolver um menu horizontal com abas. Exemplo.

Scrollovers
Movimenta texto do link de cima para baixo com a mudança da cor do mesmo. Efeito que chama a atenção do visitante. Teste passando o mouse sobre os links azuis do site.

Create A Block Hover Effect
Este site ensina a mudar a cor de fundo de um bloco de texto com o passar do mouse igual neste exemplo.

Se você gostou clique no botão . Para ser avisado quando novos conteúdos forem publicados cadastre seu e-mail clicando aqui ou assinar nosso feed. Compartilhe este artigo com seus amigos no Facebook, Twitter, Google e por e-mail:
links patrocinados
Para localizar outros artigos sobre este assunto use o campo de busca:
Podemos te avisar sempre que um novo artigo for publicado em nosso site. Para isto basta cadastrar seu e-mail usando o formulário abaixo e confirmar seu cadastro através da mensagem de confirmação que iremos enviar.

E-mail: A entrega será feita pelo Google FeedBurner

Compartilhe o artigo EFEITO DE MOUSEOVER USANDO CSS com seus amigos:

Cursos Online com Certificado de Conclusão:


Cursos On-line com Certificado

2 comentários

  1. elias medeiros disse:
    08/05/2008 às 5:38 pm

    gostei da dica sobre passar o mouse sobre a foto e aumentar ela de tamanho…
    mas ao copiar o script não soube como usá-lo…
    alguem aeh pode me dar uma dica do que fazer???
    brigado…

  2. gustavo disse:
    02/03/2011 às 10:04 am

    Desculpe-me existe um jeito mais facil de se criar um MouseOver com texto

    Mouse

    $(document).ready(function() {

    $(“#elemento”).mouseover(function() {
    $(“#resposta”).html(“Mouse está em cima!”);
    });
    $(“#elemento”).mouseout(function() {
    $(“#resposta”).html(“Mouse não está em cima”);
    });

    });

    Passe o mouse aqui!

    Coloque isso dentro de seu site , blog , etc…
    arrume as cor que quiseres em ingles por favor!
    Arrume também o texto é claro

Deixe seus comentários

«
»