Discussion :

[LMwarco]

Bonjour,

Je suis devant un petit dilem. Au survole d'une DIV principale, je souhaiterai modifier l'apparence dans les DIVs enfants.
J'ai en DIV class "Principale" avec à l'interieur DIV class "Texte1" et un DIV classe "texte2". Je souhaite en DIV (Principale):Hover (dés qu'elle que so hover est actif) modifier la couleur du Texte DIV1 et garder la même couleur du Texte DIV2 initiale. Je souhaiterai une solution en CSS ( Pour ma part, j'arrive pas à trouvé la solution ....).

Initialement:
DIV class "Principale" avec fond transparent
DIV class "Texte1" avec une Police en bleu
DIV classe "texte2" avec une Police en noir

Au survol DIV class "Principale" (
DIV class "Principale" avec fond Bleu
DIV class "Texte1" avec une Police en blanc
DIV class "texte2" avec une Police en noir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="Principale">                         
        <h2 class="Texte1"></h2>
        <div class= "Texte2" style="color:#000"></div>
</div>

En plus de ça je dois forcer la couleur du H2 en hover (car elle est initialement Bleu dans le CSS).

Si jamais quelqu'un à une solution , ou un tuto similaire à me transmettre : merci !

[NoSmoking]

Bonjour,
A lire : Savoir comment utiliser les sélecteurs CSS 2.1

nota : la notion de pseudoclasses dynamiques :hover devrait t'intéresser

[LMwarco]

Merci pour la réponse,

Je connaissais bien la class a:hover. Mais si tu reprends mon code Html ci-desous je n'arrive pas à appliquer le CSS des DIVs (textes 1 et 2) depuis la class Principale...je sais pas si je me fais bien comprendre....

Voici mon CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.Principale a:hover{
	position:relative;
	background-color: #blue;
	-moz-transform: scale(1.2);
	float: left;
	width: 230px;
	margin-right: 20px;
	padding:10px;
	margin-bottom: 20px;
	-moz-box-shadow: 0 0 10px rgba(153,153,153,0.3);
	-webkit-box-shadow: 0 0 10px rgba(153,153,153,0.3);
	box-shadow:  0 0 10px rgba(153,153,153,0.3);
}
 
.Principale h2 a:hover{
	color: #white; !important;
}
 
.texte2 a:hover{
	color: #black; !important;
}

Le H2 de mon site est en bleu, il faut aussi forcer pour que quand je suis sur la "div class Principale", mon H2 change bien en blanc.
La fonction Hover (qui se transforme en bleu/ ombre et zoom fonctionne très bien par contre mon H2 ne veut pas se transformer en texte Blanc

Une idée ?

Marc

[Invité]

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background-color: #blue;
color: #white;
color: #black;

c'est soit :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background-color: blue;
color: white;
color: black;

soit :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background-color: #069;
color: #fff;
color: #000;