I designed an SVG map and I'm trying to change the color of the targeted areas on the map when hovering over a link. Currently, when I hover over an area on the map, the link receives the underline class from jQuery and the CSS hover effect changes the fill color on the map. However, I am facing an issue where when I hover over the link, the SVG area does not change its fill color as intended. I am seeking assistance to resolve this problem.
Here is an example of what I am aiming for:
CSS:
path:hover{ fill: #FEFF7F !important; }
.svgcolor{ fill: #FEFF7F !important; }
.underline{ font-weight:600; text-decoration: underline; }
HTML:
<li id="maplink01"><a href="#" title="Text" target="_blank">Text</a></li>
SVG:
<a xlink:href="http://www.google.com" target="_blank">
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="393.5261" y1="226.1426" x2="446.614" y2="226.1426">
<stop offset="0" style="stop-color:#E7ECF9" />
<stop offset="1" style="stop-color:#C4CFE1" />
</linearGradient>
<path id="mapimg01" style="fill:url(#SVGID_5_);stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;" d="M440.333,216... /></a>
jQ:
//This works fine:
$("#mapimg01").hover(function () {
$("#maplink01").addClass('underline');
}, function () {
$("#maplink01").removeClass('underline');
});
//This does not work:
$("#maplink01").hover(function () {
$("#mapimg01").addClass('svgcolor');
}, function () {
$("#mapimg01").removeClass('svgcolor');
});