js change color mouseover

This commit is contained in:
ouidade 2024-10-08 11:47:01 +02:00
parent 6229ea3e4f
commit d7986309bc
4 changed files with 25 additions and 31 deletions

View File

@ -12,24 +12,15 @@
stroke: white;
stroke-width: 0.7;
} */
#sites-map-container circle.circle:hover{
// fill: #f7002b!important;
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
}
#sites-map-container circle.circle {
fill: black !important;
&:hover{
fill: #f7002b!important;
}
}
#sites-map-container circle.circle:hover{
fill: #f7002b!important;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {

View File

@ -108,6 +108,16 @@ svgElement.addEventListener('mouseover', function(event) {
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content, circleX, circleY, isLeftHalf);
}
const isCircle = event.target.tagName === 'circle';
console.log(isCircle);
if (isCircle === true) {
// Change la couleur en rouge
event.target.setAttribute('fill', 'red');
}
// circle.style.fill = 'red';
});
// Fermer le popup lorsque la souris quitte le cercle
@ -115,4 +125,11 @@ svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
const isCircle = event.target.tagName === 'circle';
console.log(isCircle);
if (isCircle === true) {
// Change la couleur en rouge
event.target.setAttribute('fill', 'black');
}
});

View File

@ -63,10 +63,11 @@ class SitesMap extends BlockBase {
id="site-$index"
transform="
translate($x,$y)">
<circle
id="path83" class="circle"
<circle
class="site-link"
data-content="$datacontent"
cx="0" cy="0" r="$r"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;" />
style="fill-opacity:1;fill-rule:nonzero;" />
<path
id="path84"
d="m 0,$m v $l"
@ -75,11 +76,7 @@ class SitesMap extends BlockBase {
id="path85"
d="m $m,0 h $l"
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<circle
class="site-link"
data-content="$datacontent"
cx="0" cy="0" r="$r"
style="fill:#000000;fill-opacity:0;fill-rule:nonzero;" />
</g>
SVGSITEPATH;
}

View File

@ -3077,17 +3077,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
cursor: pointer;
}
#sites-map-container circle.circle {
fill: black !important;
}
#sites-map-container circle.circle:hover {
fill: #f7002b !important;
}
#sites-map-container circle.circle:hover {
fill: #f7002b !important;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
font-family: "gilroy-semibold";