Tech Mais
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

techadd

Conectar-se

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

more_horiz
: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


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador

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

more_horiz
É um efeito ou estilização(interprete como quiser) de grande ajuda aos desenvolvedores. 
Pode proporcionar belos resultados usando-os de maneira criativa.
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum