28172 sujets

CSS et mise en forme, CSS3

Changez la couleur de tout un paragraphe contenant des <span>

Bonjour,
je suis ultra débutant en html/css.
j'aimerais juste avoir une info.
est-il possible de changez la couleur au survol de tout un paragraphe qui contient des span avec des attributs différents.

Voici mon HTML :

<p class="titre">
<span class= "titre_1">TITRE1</span><br>
<span class="titre_2">TITRE2</span><br>
<span class="titre_3">TITRE3</span>

</p>


voici mon CSS :

.titre:hover
{
color:#004438;
}

.titre1
{
font-family: 'typewriterlight', Arial, serif;
font-size: 49.5px;
color:#aaaaaa;
}


.titre2
{
font-family: 'typewriter', Arial, serif;
font-size: 63px;
color:#c8c8c8;
}


.titre3
{
font-family: 'typewriter', Arial, serif;
font-size: 69px;
color:#c8c8c8;
}



quelqu'un peut-il éventuellement me corriger ?

Merci beaucoup.
je souhaite mettre mes 3 titres dans des tailles et polices différentes.
Mais je veux qu'ils changent tous en même temps de couleur quand j'en survole un.

pour l'instant quand j'en survole un, il y en un qui change.
C'est presque ça, mais avec le code que tu as fourni normalement aucun ne changerait de couleur. Au moment de ton hover, le navigateur change la couleur du contenu de .titre, mais comme tes spans ont eux aussi une couleur défini, il prend cette dernière en compte. C4est le principe de la cascade, que je t'encourage à relire du coup parce que c'est assez fondamental Smiley smile

Pour que ca fonctionne, il faut définir la couleur en étant suffisamment précis :


.titre:hover span{
    color: #004438;
}


D'autres trucs auxquels prêter attention, en bonus :
- il y a des balises html pour définir les titre (h1, h2, etc.). Il vaux mieux utiliser celles ci que des spans.
- quand tu insere du code, utilises la coloration syntaxique (dispo sous la zone de saisie du message), ca rend les choses plu simples à lire Smiley smile
Ok merci Sephitan,
du coup voici mon html :

<div class="titre">
			<a href=""> <img src="images/lc_pont.jpg" alt="" class="pont"/> </a>
			
			
				<h1>TITRE 1</h1>
				<h2>TITRE 2</h2>
				<h3>TITRE 3</h3>
			
			 
		</div>


et le css correspondant : 



h1
{
	font-family: 'typewriterlight', Arial, serif;
	font-size: 49.5px;
	color:#b8b8b8;
	margin-top:-9px;
}


h2
{
	font-family: 'typewriter', Arial, serif;
	font-size: 63px;
	color:#e1e1e1;
	margin-top:-52px;
}


h3
{
	font-family: 'typewriter', Arial, serif;
	font-size: 69px;
	color:#e1e1e1;
	margin-top:-74px;
}


.titre:hover h
{
	color: #004438;
}



j'ai bien compris le principe de la cascade. par contre j'ai du mal à l'appliquer. Smiley sweatdrop

Merci en tout cas pour ton retour.
Pas de soucis, ça viendra avec le temps. La, ça foire parce que

.titre:hover h


n'est pas un sélecteur valide. Il va chercher tous les éléments <h> contenus dans .titre... mais h n'est pas un élément. Pour cibler tes 3 titres, soit tu écrits 3 sélecteurs


.titre:hover h1,
.titre:hover h2,
.titre:hover h3{
}


Mais c'est pas top. Soit tu donnes une classe commune a toutes tes balises h1, h2 et h3 et tu t'en sers pour les viser


.titre:hover .ta-classe{
}
j'ai fais ça :

	<div class="titre">

				<h1 class="mot">TITRE 1</h1>
				<h2 class="mot">TITRE 2</h2>
				<h3 class="mot">TITRE 3</h3>
			
	</div>



.titre:hover .mot
{
	color: #004438;
}



et toujours rien...

j'essaie la première solution
Modifié par bombo (16 Aug 2013 - 12:03)
autant pour moi !!!!
j'avais fait une faute !

c'est nickel, ça marche !

Merci Beaucoup !
Modifié par bombo (16 Aug 2013 - 12:40)
Sujet clos
Aller à