Discussion :

[Patriboom]

Bonjour,

j'ai suivi des tutos sur le net qui donnent tous la même méthode pour faire ce que je veux:
- Passant au-dessus d'un span, je veux faire paraître une div

Voici le code HTML

Code HTML :

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

1
2
3
4
5
6
7
8
<!-- Toutes les occurrences de texte au-dessus desquels le passage devrait faire paraître taglev  -->
<span class="colstate" style="color: #12d41b; ">⚫</span>
<!-- Fin de l'exemple de texte à survoler  -->
 
       <!-- La div à faire paraître  -->
	<div id="taglev" class="taglev">
	      <!--  [... contenu généré par PHP .... mais sans présence du mot taglev]   -->
	</div>

Voici le code 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
22
23
24
25
26
27
28
29
.global-notice, .taglev {
	align-items: center;
	background: #222727;
	border-radius: 15px;
	color: #f8e81c;
	display: none;
	font-size: 15px;
	justify-content: center;
	min-width: 33%;
	opacity: .85;
	padding:  20px;
	position: fixed;
	text-align: center;
	text-decoration: none;
	top: 45%; left: 33%; 
	z-index: 1000;
}
 
.taglev {
	text-align: left;
}
 
.colstate, span.Affcolstate {
	font-size: 300%;
}
 
.colstate:hover + .taglev {
	display: block;
}

Je compte donc sur .colstate:hover + .taglev { pour faire paraître ma div taglev mais rien n'y fait.
Il faut dire que mon fichier css s'allonge quelque peu après la définition de taglev. Peut-être y a-t-il une erreur, mais j'en doute car toutes les autres définitions (celles qui suivent taglev) fonctionnent bien.
J'ai aussi tenté de définir une chose simple pour .colstate:hover comme

Code :

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

1
2
3
.colstate:hover {
font-size: 400%;
}

et ça fonctionne très bien.

Des pistes ?

Merci d'avance.

[jreaux62]

Bonjour,

les codes HTML et CSS fonctionnent pour moi.

1- Vérifie peut-être AVANT l'instruction, s'il ne manque pas un }, */ ou autre qui invaliderait la ligne suivante (celle de l'instruction).

2- Attention : avec .colstate:hover + .taglev {, il faut que l'élément suive directement l'autre
Sinon, essaie .colstate:hover ~ .taglev {.

3- Au pire, montre tout le CSS, et/ou une page en ligne.

[Patriboom]

Merci Jreaux,
je crois que le détail qui m'a échappé c'est la nécessité de faire suivre immédiatement.
De plus, je ne connaissais pas la fonction tilde ( ~ ).

J'essaie et vous en reparle.

Code modifié ( ci-bas la partie du fichier css qui nous intéresse )

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
/* Notices */
.global-notice, .taglev {
	align-items: center;
	background: #222727;
	border-radius: 15px;
	color: #f8e81c;
	display: none;
	font-size: 15px;
	min-width: 33%;
	opacity: .85;
	padding:  20px;
	position: fixed;
	text-align: center;
	text-decoration: none;
	top: 45%; left: 33%; 
	z-index: 1000;
}
 
.taglev {
	text-align: left;
}
 
 
.colstate:hover ~ .taglev {
	display: block;
}
 
.colstate, span.Affcolstate {
	font-size: 300%;
}
 
.hide {
	display: none;
}
 
.global-error{
	background: #de2e2e;
}
 
.global-notice.global-error{
	background: #de2e2e!important;
}
.global-saving{
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	display: none;
}

Fichier CSS complet ici: https://github.com/pixeline/bugs/blo...ts/css/app.css
Fichier php complet ici: https://github.com/pixeline/bugs/blo...cks/footer.php (où est définie la div taglev)
Fichier php complet ici: https://github.com/pixeline/bugs/blo...dex/issues.php (où sont définies les span de classe colstate )


et tout le projet disponible sur https://github.com/pixeline/bugs/tree/Following ...
j'ignore si https://github.com/Patriboom/bugs/tree/Following vous est accessible.


Pensez-vous que le partage de propriétés entre .global-notice et .taglev ( .global-notice, .taglev ) y soit pour quelque chose ?