Discussion :

[apdf1]

Bonjour

Voila lorsque je passe sur mon path tous fonctionne mais si je passe sur le texte du path sa ne fonctionne pas, est-il possible en Css ou en Javascript de remédier à se problème?

mon

Code CSS :

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
   .map__image {
    	position: absolute;
    	top: 90px;
    	left: -90px;
    	right: 0px;
    	bottom: 0;
    	/*cadre rouge autour de la carte*/
    	border: 1px solid red;
    	width: 940px;
    	height: 640px;
    	margin-left: 100px;
    }
    .map__image path {
    	fill: #19191f;
    	stroke: #cc4646;
    	stroke-width: 0.5px;
    	transition: fill 0.1s;
    }
    .map__image path:hover {
    	fill: #0000FF;
    	stroke: #cc4646;
    }
    .map__image svg {
    	height: 1000px;
    	width: 1020px;
    }
    .map {
    	overflow: hidden;
    }
    path~text {
    	fill: #e8e809;
    	font-size: 14px;
    }
    path:hover~text {
    	fill: #fdfefe;
    	font-weight: bold;
    	font-size: 14px;
    }
    /*Pas de nom sur la carte*/
    .texte {
    	visibility: hidden;
    }

mon

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
	<div class="map" id="map">
		<div class="map__image">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1200 1200">
				<g>
					<a id="region-01" xlink: href="Aveyron/alpuech.html" target="myframe" data-img="img1" data-txt=" Alpuech">
						<path id="01" title="Alpuech" class="st0" d="M697.3,432.9 659.8,421.1 639.3,400.7 623.8,396.5 575.5,354.1 530.1,342.3 518.8,333 521.5,326.9 534.2,323.5 537.5,311.5 558.8,316.9 581.6,314 617,372.8 664.2,376.6 684.6,403.7 " />
						<text transform="matrix(1 0 0 1 537 338)">
							<tspan x="0" y="0" class="texte">Alpuech</tspan>
						</text>
					</a>
				</g>
				<g>
					<a id="region-02" xlink: href="Aveyron/brommat.html" target="myframe" data-img="img2" data-txt=" Brommat">
						<path id="02" title="Brommat" class="st0" d="M285.5,345.6 279,342.4 280.6,312.5 291.9,295.4 284.6,283.8 286.4,271 283.9,264.8 255.3,253 252.2,202.6 257.3,207.6 270.6,200.7 272.7,175.5 316.9,149.2 332.8,149.2 350.3,136.2 373.3,131 392.5,142.1 405.3,178.6 392.4,185.9 379.2,216.9 351.3,225.6 325.6,300.7 299.5,333.4 285.4,339.1 " />
						<text transform="matrix(1 0 0 1 298 212)">
							<tspan x="-5" y="0" class="texte">Brommat</tspan>
						</text>
					</a>
				</g>

Je vous remercie d'avance.
Max

[Beginner.]

Salut,

En JS c'est un problème du même genre que celui que j'avais signalé ici : #32... Cela peut être adapté...

En CSS je ne sais pas si on peut appliquer un style au path lorsque un de ses enfants (text) est survolé...
Attendons les pro du CSS...

[apdf1]

Salut Beginner

Oui je me rappelle. Attendons les pros ils font souvent des miracle.....

Bonne journée

Max

[Beginner.]

J'ai cherché à savoir si il existait un sélecteur CSS permettant de cibler le parent d'un élément eh bien apparemment il n'y en a pas encore...

Bien sûr en JS c'est faisable...

[apdf1]

Re,

Bon est bien je vais attendre pacifiquement les pros du JS.

Merci

[Beginner.]

Ah ben en JS pas besoin d'être pro...

Mais il faudrait savoir si c'est un code indépendant ou bien si tu vas l'ajouter au code de NoSmokink ?

En fait je n'ai pas compris pourquoi tu n'utilises pas le code posté au : #32 ou celui d’après qui est mieux, qu'est-ce qui te manque ?