HTML/JS balises HTML n'apparaissent pas en mode Hover

**miltonis** · 29/01/2019, 12h12

Bonjour,

Comme le titre n'est pas très parlant, je précise ici.
J'ai un petit code HTML qui permet d'afficher une carte de France. Cette carte est divisée par départements (images SVG). Chaque département est censé afficher un bloc avec du texte au survol de la souris.

Le bloc et le texte apparaissent bien mais quand je mets le texte entre des balises HTML (pour la mise en forme), le texte n'apparait plus.
Quelqu'un pourrait m'expliquer pourquoi ce n'est pas pris en compte ?

Merci pour vos retours

Pour mieux comprendre, voici le code

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
 
<body style="width:1000px;">
<!-- LE BLOC TEXTE -->
<div class="mh-menu">
	<div id="dep-75" style="display:none;">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec des gens- 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
</div>
 
<!-- LES DEPARTEMENTS -->
<div class="map" id="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
	<defs>
		<style type="text/css">
                        .land
                        {
                                fill: #CCCCCC;
                                fill-opacity: 1;
                                stroke:white;
                                stroke-opacity: 1;
                                stroke-width:0.5;
                        }
                </style>
 
		<amcharts:ammap projection="mercator" leftLongitude="-5.181900" topLatitude="51.089515" rightLongitude="9.560929" bottomLatitude="41.366975"></amcharts:ammap>
 
	</defs>
	<g>
		<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"/></a>
	</g>
</svg>
</div>
 
</body>
</html>

**CosmoKnacki** · 29/01/2019, 16h54

En réalité elles apparaissent mais disparaissent aussitôt.

Pour comprendre ce qui se passe, Il faut repasser la scène au ralenti (comme dans X-OR):

Le pointeur de la souris atteint l'image.
L'évènement MouseOver est déclenché.
Le div dep-75 passe en display:block ce qui décale la carte svg vers le bas.
Le pointeur de la souris (qui n'a pas bougé) se retrouve en dehors de l'image.
L'évènement MouseOut est déclenché.
Le div dep-75 repasse en display:none ce qui replace la carte svg à sa position initiale.
Le pointeur de la souris est de nouveau sur l'image, et ainsi de suite

Une solution consiste à donner une hauteur fixe à l'élément parent du div dep-75.

**miltonis** · 29/01/2019, 17h55

Salut,
Merci, j'ai finalement trouvé la solution. La voici si ça peut servir à d'autres

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div.map {
        width: 612px;
        height: 585px;
        background: #ccc;
}
[id^="dep-"] {
        position: absolute;
        padding: 1em;
        background: green;
        color: white;
}
[id^="dep-"] {
  display: none;
  pointer-events: none;
}
svg {
        display: block;
        width: 612px;
        height: 585px;
}
</style>
</head>
<body>
<div id="dep-75">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div id="dep-95">Texte sans balises HTML<h2>95</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div class="map" id="map">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
		<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"></path></a>
		<a href="#" onMouseOver="document.getElementById('dep-95').style.display='block';" onMouseOut="document.getElementById('dep-95').style.display='none';"><path id="FR-95" title="Val-d'Oise" class="land" d="M285.85,120.07L286.26,119.49L287.35,120.55L286.3,121.67L287.42,123.28L289.99,123.01L290.35,123.76L291.37,123.55L291.31,124.35L296.11,123.96L297.15,123.12L298.23,123.61L301.51,121.43L302.15,122.71L303.5,122.48L303.81,123.41L304.29,122.81L305.23,124.39L307.22,123.39L307.58,125.14L310,124.63L311.17,122.94L312.99,125.37L313.71,124.63L316.41,125.46L316.17,126.28L317.24,125.81L319.06,127.27L318.5,127.99L320.24,128.4L321.15,126.86L321.31,128.48L322.65,129.65L322.65,129.65L321.77,130.85L322.8,131.71L320.79,133.22L321.01,133.96L321.01,133.96L318.5,136.69L316.39,137.61L313.35,136.4L312.06,137.41L310.51,136.86L309.85,137.88L309.85,137.88L306.49,140.49L306.49,140.49L306.65,137.78L305.38,137.64L304.99,135.71L303.13,135.22L303.15,133.61L299.11,134.84L297.82,133.35L295.56,133.34L294.32,131.69L293,133.62L291.97,132.62L292.58,131.11L291.11,129.89L286.66,131.89L284.58,129.78L281.9,129.82L281.9,129.82L283.93,126.4L284.62,121.36z" cursor="pointer"/></a>
	</svg>
</div>
</body>
</html>

HTML/JS balises HTML n'apparaissent pas en mode Hover

JavaScript

Discussions similaires

Partager

Partager