Bom dia Gostaria de entender como uso a
para destacar algo quando o mouse passar por cima, não estou conseguindo.
Obrigado.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Bom dia Gostaria de entender como uso a
Obrigado.
Oii, Luiz! Tudo bem?
Agradeço por interagir por aqui trazendo sua dúvida!
Luiz, para destacar algo quando o mouse passar por cima, utilizamos o seletor :hover no arquivo CSS, ele é responsável por essa funcionalidade. E quando utilizamos a tag <div> é porque escolhemos algum elemento que está dentro dela para aplicar a funcionalidade do mouse.
Para exemplificar, imagine que você deseja destacar um texto que está dentro de uma <div> no seu arquivo HTML, certo. Em um arquivo de CSS dar a funcionalidade do mouse a ele, em código ficaria assim:
div:hover {
color: pink;
}
No exemplo acima, o texto que está dentro da <div> ficará rosa quando o mouse passar por cima. Você pode trocar a propriedade color para a forma que desejar.
Espero ter esclarecido a sua dúvida. Continue interagindo no fórum, estaremos por aqui para te auxiliar.
Bons estudos, Luiz!
Desculpe, mas é que não entendi como usar a tag div, como aplicá-la no código.
Estou aprendendo tambem, porem vou tentar te ajudarr kkk.
Olha, no html nos utilizamos as classes (class=""), para conseguirmos estilizar o conteudo desejado, certo?
e tambem temos a div que agrupa o que estiver dentro dela para conseguirmos personalizar.
por exemplo: agora eu quero que quando eu passar o mouse em cima do "Acesse minhas redes" o fundo ira ficar verde com as letras brancas...
HTML:
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="https://www.instagram.com/pedrin_souz.a/">
<img src="./assets/instagram.png" alt="logo instagram">
Instagram
</a>
<a class="apresentacao__links__link" href="https://www.linkedin.com/in/pedro-arthur-a95428277/">
<img src="./assets/linkedin.png" alt="logo linkedin">
Linkedin
</a>
<a class="apresentacao__links__link" href="https://github.com/Pedroprogrammingstudent">
<img src="./assets/github.png" alt="logo github">
Github
</a>
</div>
CSS:
.apresentacao__links__subtitulo:hover {
background-color: #00FF00; (verde)
color:#ffffff; (branco)
}
percebeu que nao precisei usar o "div" no css para personalizar? só usei a classe (class="apresentacao__links__subtitulo") que esta dentro do "div" no html. E depois chamei ela no css como (.apresentacao__links__subtitulo:hover {}) e personalizei dentro das chaves como eu queria.
Espero ter ajudadoo, qualquer coisa me chama para nos irmos evoluindo juntos e tirando um a duvida do outroo...