[CSS] Passe por cima de mim (: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.



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



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


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



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.

---