Afficher un nouvel élément lors d'un hover [RESOLU]

Ce sujet est résolu
Default
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'aimerais faire en sorte que quand je survole mon bouton (button) que ma petite boîte (.box) s'affiche avec le titre h2 dedans avez vous de petites idées? ;)

en bref, j'aimerais que mon .box soit invisible, puis après hover mon (button) le .box devient visible

petit screen au cas ou : http://prntscr.com/neiw7l

Cordialement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    <div class="container">

        <p>
        <button>Clique moi</button>
        </p>


        <div class="box">
                <h2>COUCOU</h2>
        </div>

    </div> 
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');

body {
    font-family: 'PT Sans', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.container {
    width: 80%;
    background: #eee;
    padding: 15px;
}

.container button {
    background: rgb(214, 40, 40);
    color: white;
    border: none;
    padding: 15px 24px;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    animation: anim 1s;
    animation-fill-mode: forwards;
    width: 150px;
    height: 70px;
    font-size: 16px;
}

@keyframes anim {
    from {
        width: 150px;
        height: 70px;
    }

    to {
        width: 300px;
        font-size: 24px;
        height: 140px;
    }
}

.box {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 70%;
    width: 300px;
    height: 140px;
    border: 1px solid black;
    text-align: center;
   /* visibility: hidden;
    opacity: 0;*/
}

/*.container button:hover .box h2{
    visibility: visible;
    opacity: 1;
}*/

4 Réponse

17162
,

Bonjour.
Ce que tu demandes, tu ne peux pas le faire juste avec le HTML/CSS, il va te falloir utiliser du JavaScript pour ça.

Default
,

D'accord merci et il n'y aucune solution même en jouant avec l'opacité et le visibility?

Default
,

Salut, le problème est que en css, il est impossible d'affecter d'autres éléments que l'élement lui-même lors d'un événement, comme le hover. Il faut donc impérativement utiliser le js.

Default
,

ça marche merci beaucoup les gars ;)