Mudar de cor ao passar o mouse com CSS

47d atrás

Comece adicionando no HTML o elemento em que vamos aplicar o efeito, nesse caso, uma div simples:

<div></div>

No #CSS, vamos estilizar essa div. Deixar ela com background preto e altura e largura de 100px.

div {
    background-color: black;
    height: 100px;
    transition: background-color 0.25s;
    width: 100px;
}

Colocamos também a propriedade transition, que vai animar a transição de cor do background, não é obrigatório, mas deixa o efeito mais bonito.

Por fim, vamos utilizar a pseudo-class :hover, e mudar a cor pra um tom de verde, sempre que o mouse estiver passando sobre a div:

div:hover {
    background-color: lightgreen;
}

Confira o resultado e o código completo abaixo:

Comentários (0)