Discussion :

[jpagnol]

Bonjour, je suis actuellement en train de développer un site de visualisation de données et je me suis questionné sur la faisabilité d'une règle CSS.

Mon but est ici d'afficher des données dans un graphe (en utilisant du SVG) comme on peut le voir dans la figure ci-dessous:


Dans le graphe chaque "donnée" est représentée par un point et chaque point est lié à un rectangle d'information.
Ce que je veux c'est faire en sorte que lorsque je survole un point, le rectangle associé s'affiche.

Je précise que le graphe est construit depuis un script PHP et que le nombre de données dépendra du contenu d'une base qui évoluera dans le temps.

Ici ce que je compte faire c'est attribuer à chaque point un id de la forme : "#p0, #p1, #p2, etc".
Les rectangles auront un id de la forme : "#r0, #r1, #r2, etc".

Alors avec une boucle PHP je pourrais facilement faire une chose du genre :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
echo "<style>";
 
for($i=0; $i<$length; $i++){
    echo "#r".$i."{
                       display: none;
             }";
 
    echo "#p".$i.":hover ~ #r".$i."{
                       display: block;
             }"; 
}
 
echo "</style>";

Seulement, je me demandais s'il y avait une façon d'arriver au même résultat mais de manière plus élégante.
Merci d'avance

[Pytet]

Bonjour,

Défini une classe css commune pour tous les éléments points et une autre classe css commune pour tous les éléments rectangles, puis utilises ces classes css pour définir la règle css avec hover.

[jpagnol]

Ho oui merci j'avais pas directement vu ça sous cet angle.
Bon alors si jamais quelqu'un se pose la question, j'ai enlevé tous les ids que j'ai utilisé auparavant.

Les points font tous partis d'une classe '.point' et les rectangle eux d'une classe '.info'.
Et donc comme dans le code produit par le script PHP chaque point est suivi par son rectangle d'information on peut simplement écrire ça en CSS:

Code :

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

1
2
3
4
5
6
7
.info{
    display: none;
}
 
.point:hover + .info{
    display: block;
}

Voilà