Bonjour a tous, alors voila j'aimerais pouvoir quand on passe la souris sur (1) que ca affiche une description en dessous et que quand on passe la souris sur (2) ca affiche autre chose, tout cela en passant par du html et css par la propriété :hover. Les couleurs ne sont pas définitive c'est pour que ce soit plus clair (voir image si dessous): 

Voici le code HTML et CSS utilisé:

<section id="about">
		<div class="wrapper">
			<li id="about_me">Qui suis-je ?</li>
			<li id="about_metier">Qu'est ce que l'acupuncture ?</li>
			<div id="description_me">
				
		        </div>
		</div>
	</section>

#about .wrapper{
width: 100%;
height: 900px;

}

#about .wrapper li{
display: inline;
text-align:center;
line-height: 40px;
}

#about .wrapper li:nth-child(1){
float: left;
width: 50%;
height: 50px;
background: #b98000;
color: #d86049;
}

#about .wrapper li:nth-child(2){
float: right;
width: 50%;
height: 50px;
background: #ed6950;
color: #ffc74a;
}

#about_me {
	height: 50px;
	width: 50%;
}

#about_me:hover + #description_me{
	color: red
}

#description_me{
	display:none;
}

J'ai testé pour l'instant juste pour la partie de gauche, quand on passe la souris pour que du texte apparaissent. Le texte se trouvera dans la balise #description_me

Voila voila 

Bonjour LucasBoinet,

1 point :

Ton code html n'est pas bon un li directement dans un div c'est pas autorisé

Essayes de corriger ton code html, car il est difficile de t'aider avec un code html faux (reviens vers nous après tes corrections)

La nouvelle structure de ton code HTML, va influencer les sélecteurs dans ta Css

2 point :

Dans ta css tu utilises #about .wrapper li:nth-child(1) et #about .wrapper li:nth-child(2), tu as un id sur ces li utilises les ! Sinon à quoi bon les mettres

Si tu regardes ton code sur le hover, "description_me" n'est pas affiché, il est toujours display=none

#about_me:hover + #description_me{
    color: red
}
 
#description_me{
    display:none;
}

-
Edité par AliasDmc 13 octobre 2018 à 13:03:37

j'ajouterai un point supplémentaire, c'est à dire qu'il ne sert à rien de surclasser les éléments comme par exemple :

#about .wrapper li:nth-child(1)

Ici il y a deux problèmes, li:nth-child(1)  peux s'écrire li:first-child tout simplement puisqu'on séléctionne le li premier enfant de...rien puisqu'il devrait y avoir <ul> ou <ol> comme conteneur. 

Ensuite mettre #about a chaque chaque sélécteur CSS ne sert à rien comme par exemple dans notre cas on sait que li fait partie de .wrapper. Il suffirait donc d'écrire
.wrapper  li:first-child tout simplement ! 

etc...

-
Edité par Zoki_Marciano 13 octobre 2018 à 14:14:13

D'accord merci! Je corrige ça et je reviens vers vous.

Le #about .wrapper (dans le css) sert a differencié des autres .wrapper que j'ai dans mon html

J'ai fait les changements que vous m'avez avisé de faire, voila le nouveau code:

<section id="about">
		<div class="wrapper">
			<ul>
				<li id="about_me">Qui suis-je ?</li>
				<li id="about_metier">Qu'est ce que l'acupuncture ?</li>
			</ul>
			<div id="description_me">
				<img src="img/profil_picture.jpg">
				<p>J'ai toujours été attiré par les soins mais les soins<br> différents. Guidé par une quête de spiritualité, c'est vers<br> la médecine chinoise que je me suis tourné lorsque,<br> lassé de mon parcours professionnel dans le domaine<br> du management de la Qualité, j'envisageais de donner du<br> sens à ma reconversion professionnelle.<br>
				Formé en 2008 à l'école C.E.D.R.E puis en 2013 pour une<br> spécialisation avec la Formation Supérieure d'Acupuncture<br> de P. Sionneau, je continue de me <br>perfectionner régulièrement.
				Je me suis engagé à aider du mieux possible les<br> personnes qui me consultent. Mes méthodes de soins<br> permettront à votre énergie de circuler plus librement, ce<br> qui débloquera le potentiel de guérison de votre corps et<br> vous permettra de vous sentir bien à nouveau.<br>
				Je suis aussi fan de musique et de découvertes<br> musicales que je ne manquerais pas de vous partager<br> sur ma page Facebook.</p>
			</div>
		</div>
	</section>

#about .wrapper{
width: 100%;
height: 900px;

}

#about .wrapper ul li{
display: inline;
text-align:center;
line-height: 40px;
}

#about_me{
float: left;
width: 50%;
height: 50px;
background: #b98000;
color: #d86049;
}

#about_metier{
float: right;
width: 50%;
height: 50px;
background: #ed6950;
color: #ffc74a;
}

#about_me:hover #description_me{
	display:block;
}

#description_me{
	display:none;
}

#about p {
	color: #000;
	text-align: center;
}

#about img{
	border-radius: 50%;
	display: block;
	margin: 20px auto;
}

N'hésitez pas a me redire si des erreurs sont toujours présentes

-
Edité par LucasBoinet 13 octobre 2018 à 23:36:22