How to use Hover

Asked

Viewed 34 times

0

Wish when I put the mouse on top of the div.caixa alter my div.caixa-titulo, but I could not.

My code:

 <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Pagina inicial</title>

    <style type="text/css">
      .caixa, .caixa-titulo, .caixa-conteudo{
        border-radius: 4px;
      }

      .caixa{
        border: 1px solid #BDBDBD;
      }

      .caixa-titulo{
        padding: 10px;
        border-bottom: 1px solid #BDBDBD;
        text-align: center;
      }

      .caixa-titulo:hover{
        background-color: pink;
      }

      .caixa:hover{
        cursor: pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      </style>

  </head>
  <body>

    <section style="width: 50%; margin: 0 auto;">
      <div class="caixa">
          <div class="caixa-titulo">
              <h1>Calendário</h1>
          </div>
          <div class="caixa-conteudo">
            <p>
              Aqui está um calendário simples que você pode adicionar atividade nele, clique <a href="">Aqui</a>
            </p>
         </div>
      </div>
    </section>


  </body>
</html>

html css

1 answer

2

You must put the :hover in the box class .caixa to change the daughter class .caixa-titulo:

       evento
         ↓
.caixa:hover .caixa-titulo{
   ↑               ↑
  pai            filha

Behold:

<!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Pagina inicial</title>

    <style type="text/css">
      .caixa, .caixa-titulo, .caixa-conteudo{
        border-radius: 4px;
      }

      .caixa{
        border: 1px solid #BDBDBD;
      }

      .caixa-titulo{
        padding: 10px;
        border-bottom: 1px solid #BDBDBD;
        text-align: center;
      }

      .caixa:hover .caixa-titulo{
        background-color: pink;
      }

      .caixa:hover{
        cursor: pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      </style>

  </head>
  <body>

    <section style="width: 50%; margin: 0 auto;">
      <div class="caixa">
          <div class="caixa-titulo">
              <h1>Calendário</h1>
          </div>
          <div class="caixa-conteudo">
            <p>
              Aqui está um calendário simples que você pode adicionar atividade nele, clique <a href="">Aqui</a>
            </p>
         </div>
      </div>
    </section>


  </body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.