Interactive SVG: Hover over one part, change the color of another

Question

I'm trying to create an interactive SVG-Map. I placed the Code from illustrator into a HTML and even managed to change the fill of some of my paths when you hover over them. My problem is, that there is a white rectangle as well as text in front of my path: when I hover over those, nothing happens. I want to change that. My goal is to be able to hover over Text/ white Background/path and the path will always fill in my color (#ff7bac)

Here part of my SVG-Code:

    <a xlink:href="http://travelalberta.com" id="wohnrauemeLink">
    <g id="wohnraeume">
        <g id="wohnraeumeFill">
            <g>
                <path class="eckig" d="M1169,124.5v341.1h429V124.5H1169z M1390.5,445h-199.4l0-68.7h71v33.9h128.4V445z"/>
            </g>
        </g>
        <polygon id="wohnrauemeWhite" fill="#FFFFFF" points="1191.3,445.6 1191.2,372.3 1262.3,372.3 1262.2,410.1 1391,411.3 
            1390.5,445.7                "/>
        </g>
</a>

And my css:

path.eckig {
    fill: #FFFFFF;
    opacity: 0;
    transition: .6s fill;
      }

path.eckig:hover { 
    fill: #ff7bac;
    opacity: 1;
     }

I hope there is someone who can help me with this: I've been trying for days :I

******************** Edit *********************

Hey there :) I'm still trying to figure this out so here is a simplified version:

https://jsfiddle.net/4tjzk8z5/11/

My goal is to be able to change the color of the red rectangle while I hover over the blue rectangle.

I tried to use JS this time, but it didn't work either:

function mouseoverblue(){
var myPara = document.getElementById("red");
myPara.style.color = "#123444";

}

Thank you so much for your help

Answer 1

If you can put your svg code in the HTML page I suggest you to use CSS for make the animation.

Here you can find a jsFiddle

CSS for your example:

/* Colors the polygon where you are hovering it or the path */
#wohnraeumeFill:hover+polygon,
polygon:hover{
    fill: #800;
}

---

EDIT

with CSS you can't select previous siblings, so you have to change the order of your SVG elements:

<svg>
    <g id="wohnraeume" transform="translate(-1100 -350)">

        <polygon id="wohnrauemeWhite" fill="#FFFFFF" points="1191.3,445.6 1191.2,372.3 1262.3,372.3 1262.2,410.1 1391,411.3 
            1390.5,445.7                "/>
        <g id="wohnraeumeFill">
            <g>
                <path class="eckig" d="M1169,124.5v341.1h429V124.5H1169z M1390.5,445h-199.4l0-68.7h71v33.9h128.4V445z"/>
            </g>
        </g>
    </g>
</svg>

And the you can use the following CSS rule:

polygon:hover + #wohnraeumeFill path{
    fill: #800;
}

Updated jsFiddle

Answer 2

If you used jQuery, it would be like this:

$('#svg1').on({
    mouseenter: function () {
        $('#svg2').css('fill', 'red');
    },
    mouseleave: function () {
        $('#svg2').css('fill', 'blue');
    }
});

where #svg1 and #svg2 are #wohnraeumeFill and #wohnrauemeWhite respectively.

Answer 3

Add mouse event functions onmouseover to set the color and onmouseout to reset it.

<rect id="blue" onmouseover="Img('#a02e3f')" onmouseout="Img('#123444')" x="753" y="375.3" fill="none" width="586.2" height="501.7"/>

Add the following in the script section : (And change the Load Type to head )

function Img(color){
    document.getElementById("red").style.fill=color;
}

PS: Or you can use JQuery, Link Here <.. And select JQuery in Frameworks and Extensions