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

Version imprimable

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 :roll:

Pour mieux comprendre, voici le code

Code:

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>

29/01/2019, 16h54
CosmoKnacki
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.

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

Code:

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>