Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


Você não está conectado. Conecte-se ou registre-se

 » Programação » Tutoriais de Códigos » 

[CSS] Passe por cima de mim (:hover)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar
Administrador

em Qui Abr 09, 2015 8:00 pm
:hover



Introdução: Este aqui é um pequeno tutorial de como utilizar a ferramenta :hover .

Primeiramente, hover vem do inglês e significa pairar. Sabe quando você paira o mouse em algum link e ele fica de outra cor? É exatamente isso.


Let's go! Suponhamos que queiramos que uma certa frase/palavra mude de cor ao passar o mouse nela. Primeiramente vamos precisar de um id para mais tarde poder "dizer" ao hover que se trata dessa palavra e de mais nenhuma.

Código:
<span id="minha-frase"> Amanhã é domingo. </span>

Atualmente a nossa frase está sem efeito, e que tal se lhe colocar uma cor?

Código:
<span style="color:red" id="minha-frase"> Amanhã é domingo</span>

Mas ainda não ficou do meu gosto, eu quero que se alguém passar o mouse ela chame a atenção!

Código:
#minha-frase:hover {
Essa é a primeira parte do código. Utilizamos a id do span e atrás colocamos o famoso efeito (:hover).

Código:
#minha-frase:hover {
font-weight: 600;
}

O que acontece aqui é que se alguém passar por cima da minha frase ela ficará em negrito. Você poderá personalizar ao seu gosto, com cores ou sublinhado etc.
Este efeito (:hover) dá para utilizar onde quiser, mesmo em links ou outros.




© Mais Info

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Qui Abr 09, 2015 9:03 pm
É um efeito ou estilização(interprete como quiser) de grande ajuda aos desenvolvedores. 
Pode proporcionar belos resultados usando-os de maneira criativa.

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum