3
respostas

[Dúvida] Como usar a <div>

Bom dia Gostaria de entender como uso a

para destacar algo quando o mouse passar por cima, não estou conseguindo.

Obrigado.

3 respostas

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...