CSS CSS uso de : hover , display none e display block

dev aleatorio · 11 de maio de 2022

ola queria ajuda para entender como funciona o hover no css ,segue o codigo que tentei fazer para aprender mas esta dando erro . Eu não entendo bem é a questão de herança

<body>
    <header>
        <div class="container">
            <h1>Seja bem vindos</h1>

            <p id="principal" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non, id dicta. Tenetur consectetur, dignissimos esse quae quas similique qui eum voluptate commodi, quos facere minima repellat optio sint, a dolorum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptas deserunt fuga quia non excepturi, maiores reprehenderit hic quod molestiae sed illo aspernatur ipsa ab reiciendis quae delectus id nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae vero quam cupiditate animi atque accusamus laborum possimus in dolore? Animi dicta nam accusamus. Aliquam voluptate molestiae perferendis debitis vel voluptatum?</p>
        </div>


        <div class="acao">
            <h2 class="titulo">Sobre nos , <strong>passe o mouse para saber mais</strong></h2>

            <p class="secundario">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere, doloremque harum ad, sequi minus cupiditate, atque sunt tenetur ullam aspernatur perspiciatis? Delectus sapiente, voluptatum eligendi iure odit autem vel? amet consectetur adipisicing elit. Repellat voluptas deserunt fuga quia non excepturi, maiores reprehenderit hic quod molestiae sed illo aspernatur ipsa ab reiciendis quae delectus id nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae vero quam cupiditate animi atque accusamus laborum possimus in dolore? Animi dicta nam accusamus. Aliquam voluptate molestiae perferendis debitis vel voluptatum</p>
        </div>
            
        
    </header>
    <main>  
        <div class="acao" >
            <h2 class="titulo">Aqui é um lugar de diverção , <strong>passe o mouse para saber mais</strong></h2>
            <p class="secundario">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, explicabo nostrum, quidem laborum saepe eius animi quisquam nesciunt voluptates delectus provident aperiam cum optio deserunt nihil. Ipsam optio libero rem.amet consectetur adipisicing elit. Repellat voluptas deserunt fuga quia non excepturi, maiores reprehenderit hic quod molestiae sed illo aspernatur ipsa ab reiciendis quae delectus id nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae vero quam cupiditate animi atque accusamus laborum possimus in dolore? Animi dicta nam accusamus. Aliquam voluptate molestiae perferendis debitis vel voluptatum</p>
        </div>

        <section>
            <h2>Diverção</h2>

            <ul>
                <li>quadro 01</li>
                <li>quadro 02</li>
                <li>quadro 03</li>
            </ul>

        </section>
        


    </main>
    
</body>

body{
    background-color: rgba(137, 43, 226, 0.274);
   
    padding: auto;
}

h1{
    text-align: center;
    color: brown;
    background-color: aqua;
    padding: 10px;
    margin-block: 30px;
   
}

header{
    margin-bottom: 60px;
}

p{
    color: darkcyan;
    background-color: rgba(240, 69, 6, 0.329);
    margin-block: 40px;
}


.acao .titulo{
    display: inline;
    padding: 10px;
    color: azure;
    background-color: rgba(0, 0, 255, 0.555) ;
    border-radius: 12px;
    cursor: pointer;

}


.secundario{
    display: none;
}

.acao .titulo:hover .secundario {
    display: block;
}

eu queria que quando eu passasse o mouse no titulo a classe secundaria que são os p aparecessem

MailingTester · 11 de maio de 2022

Para indicar um elemento que vem depois, use o sinal de mais:
... .titulo:hover + .secundario ...

DiF · 12 de maio de 2022

@dev aleatorio Exemplo:

HTML:

<div>
   <h1>
        Isto é um título
   </h1>
   <p>
     Isto é um parágrafo que  aparece caso você passe o mouse em cima do título.
   </p>
</div>

CSS:

p{display: none;}
h1:hover + p{display: block;}

Teste online: https://jsfiddle.net/dife/hz0k5nye/1/

Entrar

CSS CSS uso de : hover , display none e display block

Posts recomendados

dev aleatorio

MailingTester

DiF

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos