Difficulté hover sur une liste.

Bonjour tout le monde,

Je suis comptable de formation et je veux devenir développeur web.

J'essaye d'avancer étape par étape.

Je bloque sur quelques choses que je ne comprends pas.

Pour simplifier sur le code HTML ci-dessous j'aimerai appliquer un hover au li donc changer la couleur au passage de la souris du "hello guys" et du "un paragraphe". l’inconvénient c'est que lorsque je modifie le code CSS du paragraphe en appliquant une couleur et que je souhaites mettre une nouvelle couleur en hover pour le li le paragraphe à l'intérieur du li ne change pas. Autrement il garde la couleur du paragraphe précédemment donné en CSS.

		
<header>
	<p>hello guys</p>
		<ul>
			<li>
				hello guys
				<p>un paragraphe</p>
			</li>
		</ul>
</header>

p{
	color: blue;
}
ul li:hover{
	color: green;
}

Merci beaucoup.

Bonjour,

heu.. j'ai mal lu la question. Désolé.
Modifié par Greg_Lumiere (19 Dec 2017 - 08:37)

De quel "hello guys" souhaitez-vous changer la couleur au survol de la souris ? Celui juste sous le header ou celui inclut dans le li ?

Salut

ul li:hover{
	color: green;
}
ul li:hover p{
	color: green;
}

Greg_Lumiere a écrit :
De quel "hello guys" souhaitez-vous changer la couleur au survol de la souris ? Celui juste sous le header ou celui inclut dans le li ?

Celui dans le li, je comprends pas le comportement du CSS.

Il s'agit d'une histoire de poids des sélecteurs qui fait que l'instruction sur P prend le pas sur le hover.

De fait la réponse de Jencal est parfaitement appropriée.


Là où vous obteniez:
à l'état neutre
hello world
* hello guys
un paragraphe

et au survol
hello world
* hello guys
un paragraphe


En appliquant le bon conseil de Jencal, vous obtiendrez:
à l'état neutre
hello world
* hello guys
un paragraphe

et au survol
hello world
* hello guys
un paragraphe