Bom dia Gostaria de entender como uso a
Obrigado.
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...