'How to change fill of an SVG element based on hover of an separate HTML element?

I have a simple SVG graphic (basically 4 squares) in one div. Next to that div is another div with 4 HTML buttons. I want that on hover of button 1, one of the SVG squares changes its background color. And on hover of button 2, another SVG square changes its background color, same for the next 2 buttons and SVG squares. (and when hovering out of the respective button, the SVG square goes back to no fill.)

I have been researching this a lot but have not found a solution. From what I am understanding I can't do this with CSS but is this possible with jQuery or javascript?

For context; I am trying to understand how an interactive graphic like on this page is working: https://the-jay.ch/wohnungen (scroll down to "WOHNUNGSANGEBOT")

.cls-1 {
  fill: none;
  stroke: #231f20;
  stroke-miterlimit: 10;
  stroke-width: 35px;
}

.svg_section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
}

.svg_wrapper {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.html-embed {
  width: 100%;
  height: 100%;
}

.svg_trigger_div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e4b5b5;
}

.button1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #973535;
}

.button2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #5aac6c;
}

.button3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #559bbb;
}

.button4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(162, 71, 153, 0.72);
}

.text-block {
  line-height: 14px;
}
<div class="svg_section">
  <div class="svg_wrapper">
    <div class="html-embed w-embed">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
        <defs></defs>
        <rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
        <rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
      </svg>
    </div>
  </div>
  <div class="svg_trigger_div">
    <a href="#" class="button1 w-inline-block">
      <div class="text-block">Button 1</div>
    </a>
    <a href="#" class="button2 w-inline-block">
      <div class="text-block">Button 2</div>
    </a>
    <a href="#" class="button3 w-inline-block">
      <div class="text-block">Button 3</div>
    </a>
    <a href="#" class="button4 w-inline-block">
      <div class="text-block">Button 4</div>
    </a>
  </div>
</div>
javascriptjquerysvg


Solution 1:[1]

var allClasses = [], theSVG = null;
function changeSvgClasslist(add){
    if( theSVG ){
        allClasses.forEach( oneClass => { theSVG.classList.remove(oneClass); } )
        if(add) theSVG.classList.add(add);
        console.log(theSVG.classList);
    }
}

function btnOver(evt){
    let btnClass = evt.target.getAttribute('data-class');
    changeSvgClasslist(btnClass);
}
function btnOut(evt){
    changeSvgClasslist(null);
}

document.addEventListener('DOMContentLoaded', () => {
    theSVG = document.querySelector('#Layer_1');
    let theButtons = document.querySelectorAll('#svg_trigger_div .w-inline-block');
    console.log("I see %d buttons.", theButtons.length);
    theButtons.forEach( (btn,idx) => {
        let curClass = 'btnHover'+ (idx+1);
        allClasses.push( curClass );
        btn.setAttribute('data-class', curClass);
        btn.addEventListener('mouseenter', btnOver);
        btn.addEventListener('mouseleave', btnOut);
    } )
});
.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:35px;
  }

.svg_section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
}

.svg_wrapper {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.html-embed {
  width: 100%;
  height: 100%;
}

#svg_trigger_div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e4b5b5;
}

.button1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #973535;
}

.button2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #5aac6c;
}

.button3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #559bbb;
}

.button4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(162, 71, 153, 0.72);
}

.text-block {
  line-height: 14px;
}

.btnHover1 #rec1{ fill: red; }
.btnHover2 #rec2{ fill: red; }
.btnHover3 #rec3{ fill: red; }
.btnHover4 #rec4{ fill: red; }
<div class="svg_section">
    <div class="svg_wrapper">
        <div class="html-embed w-embed"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
            <defs></defs>
            <rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
            <rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
        </svg></div>
    </div>
    <div id="svg_trigger_div">
        <a href="#" class="button1 w-inline-block">
            <div class="text-block">Button 1</div>
        </a>
        <a href="#" class="button2 w-inline-block">
            <div class="text-block">Button 2</div>
        </a>
        <a href="#" class="button3 w-inline-block">
            <div class="text-block">Button 3</div>
        </a>
        <a href="#" class="button4 w-inline-block">
            <div class="text-block">Button 4</div>
        </a>
    </div>
</div>

Solution 2:[2]

The way you coded it, you can't just by using css. You'll need to use Javascript with a MouseOver or a MouseEnter EventListener

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 flowtron
Solution 2 Mbenga

Related Questions

React Router with optional path parameter

How to dynamically update google recaptcha sitekey?

How to dynamically update google recaptcha sitekey?

Remove duplicate in a string - javascript

Remove duplicate in a string - javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Find an element in DOM based on an attribute value

Redirecting html page with javascript

Find an element in DOM based on an attribute value

Find an element in DOM based on an attribute value

Redirecting html page with javascript

How to find x and y coordinates of a button while using keyboard navigation?

How to find x and y coordinates of a button while using keyboard navigation?