18008 sujets

Questions générales et questions de débutants

[Résolu] Ouvrir du texte avec un :hover

Bonjour,

J'ai démarré une formation de développeur web par correspondance il y a maintenant 3 mois (en parallèle de mon boulot oufff). J'en suis à l'étape Html/Css et là je rencontre une difficulté qui n'en sera pas une pour beaucoup j'imagine.

Alors voilà, c'est tout simple, je dois seulement faire dérouler (ouvrir en dessous) du texte en passant la souris sur chacun des 4 articles mais séparément et avec un hover. Le texte se masque une fois la souris retirée.

Je n'arrive pas à faire ouvrir mon texte "ex: Text de l'article1...blablabla" au passage de la souris. Faut il que je créé une div id ou div class?

Merci par avance pour votre aide


Voilà mon code Html et Css ci dessous...


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="transition.css" type="text/css" />
    <title>Transition</title>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Article 1</a></li>
            <p>TEXTE de l'article 1.....Blablablabla</p>
            <li><a href="">Article 2</a></li>
            <p>TEXTE de l'article 2.....Blablablabla</p>
            <li><a href="">Article 3</a></li>
            <p>TEXTE de l'article 3.....Blablablabla</p>
            <li><a href="">Article 4</a></li>
            <p>TEXTE de l'article 4.....Blablablabla</p>
        </ul>

    </nav>




body {
padding: 0;
margin: 0;
}

a {
text-decoration: none;
font-weight: bold;
color: black;
}

ul {padding: 0;
list-style: none;
}

li {
display: block;
margin: 25px;
padding: 5px;
width: 300px;
background-color: darkgrey;
border-radius: 20px;
}

p {
display: none;
height: 0;
overflow: hidden;
-webkit-transition: height 1s ease-out;
transition: height 1s ease-out;
}

nav ul li:hover p {
display: block;
height: 400px;
}
Salut

https://www.w3schools.com/cssref/css_selectors.asp

Tu as sur cette page tous les sélecteurs possible en CSS et il y en a un qui nous intéresse tous particulièrement qui pourrais t'aider.

le "+".

exemple :
element+element div + p Selects all <p> elements that are placed immediately after <div>

Donc on comprend, au vu de ton architecture que tu places tes "<p>" juste après tes <li> (et non à l'intérieur). Du coup ils sont placés directement après les <li>.
Tu peux alors transformer ton :hover dans ton css en mettant "+ p": 

nav ul li:hover + p {
display: block;
height: 400px;
}

Modifié par JENCAL (24 Jun 2019 - 10:35)
Salut,

Merci beaucoup Jencal, ça marche nickel.... Smiley biggrin

Avoir galéré pendant plusieurs heures pour un malheureux +, j'ai la haine lol mais c'est aussi ça apprendre
Sujet clos
Aller à