Como faço para dentro do Menu acionar a mudança para ativo enquanto o mouse estiver sobre o item ? Exemplo: Eu passo o mouse sobre o campo "Inicio" e só assim ele ficaria branco ?
Como faço para dentro do Menu acionar a mudança para ativo enquanto o mouse estiver sobre o item ? Exemplo: Eu passo o mouse sobre o campo "Inicio" e só assim ele ficaria branco ?
Oi Pedro, tudo bem?
Para você fazer essa mudança terá que usar a pseudo-classe do css chamada :active
.
Por exemplo:HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Mouse ativo exemplo</h1>
<p> O link de "Menu" ficará verde limão quando você clicar nele
<a href="#">Menu</a></p>
</body>
</html>
E o CSS
:
body {
color: #FFFFFF;
background-color: #0f0f0f;
}
p {
color :aliceblue;
}
p a:hover {
font-weight: bold;
}
p a:active {
color: lime
}
Quando você deixa seu mouse pressionado a cor do Menu fica com a cor verde limão. E você pode estilizar como quiser, muito legal né?
Deixo aqui uma documentação se você quiser ler mais sobre essa pseudo-classe.
Qualquer dúvida pode chamar.
Abraços e bons estudos!