Bloquer un survol a la souris

**salv** · 24/01/2007, 10h37

Bonjour, je cherche a faire afficher un commentaire dans une zone au passage de la souris, mais il me faudrait pouvoir le garder apres un clic:

en partant de l exemple sur http://batraciens.net/css-astuces/co...es-survol1.htm , je me suis dit, si j avoute un visited, ca le bloquera, mais le probleme est que les commentaires se supperposent ensuite...
Comment puis regler cela, de preference sans ajouter de scripts ? merci

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
<html>
<head>
<style type="text/css">
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */ 
a span {display:none ; /* cache les <span> placés dans un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span> */
color:black} /* met le texte <span> en noir */
 
a:hover span, a:visited span {display: block; /* Montre le texte <span> lors du survol */ 
position: absolute; /* envoi le texte <span> dans 1 zone précise de l'écran */
top: 400px; /* cette zone se situe à 400 pixels du haut */ 
left: 200px ;} /* cette zone se situe à 200 pixels de la gauche*/ 
 
.boite {position: absolute; /* envoi 1 boite dans 1 zone précise de l'écran */
top: 390px; /* boite placée autour de l'affichage prévu du texte <span> */
left: 190px ; /* boite placée autour de l'affichage prévu du texte <span> */
width: 200px ; /* largeur en pixel de la boite */
height:50px ; /* largeur en pixel de la boite */
border: solid 2px black} /* bordure de la boite */
</style>
</head>
 
<body>
 
<div class="boite"></div> <!-- appel "boite" -->
 
<a href="#">lien 1<span> a a a a a a a a a</span></a> <!-- lien et son commentaire en survol -->
<a href="#">lien 2<span> bbb bb bbb bbb bbb</span></a> <!-- lien et son commentaire en survol -->
 
</body>
</html>

**Auteur** · 25/01/2007, 22h02

bonjour,

Code css :

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

1
2
3
4
5
6
a:hover span, a:visited span {
display: block; 
position: absolute;
top: 400px;
left: 200px ;
}

tes span ont la même position. Si tu ne veux pas que les textes se superposent, deux solutions :

ajoute un fond blanc au span
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
```
background:#FFFFFF;
```
>>inconvénient majeur, si un des messages est figé suite au clic, le second message risque de ne pas apparaître.

ou mieux : donne une position pour chaque span

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
a:hover span, a:visited span {
display: block; 
position: absolute; 
} 
.position1{
top: 400px;
left: 200px ;
}
.position2{
top: 420px;
left: 200px ;
}

Code html :

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

1
2
3
4
5
 
<div class="boite"></div> <!-- appel "boite" -->
 
<a href="#">lien 1<span class="position1"> a a a a a a a a a</span></a> <!-- lien et son commentaire en survol -->
<a href="#">lien 2<span class="position2"> bbb bb bbb bbb bbb</span></a> <!-- lien et son commentaire en survol -->

>>inconvénients : il faut tenir compte de la taille de la police pour éviter une superposition (forcer la police et la taille dans la CSS).
les messages n'ont pas la même ordonnée
>>avantage : les deux messages sont visibles

Bloquer un survol a la souris

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager