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

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 >
  <div >
    <div >
      <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"  x="17.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec3"  x="517.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec2"  x="17.5" y="518.42" width="500" height="500"></rect>
        <rect id="rec1"  x="517.5" y="518.42" width="500" height="500"></rect>
      </svg>
    </div>
  </div>
  <div >
    <a href="#" >
      <div >Button 1</div>
    </a>
    <a href="#" >
      <div >Button 2</div>
    </a>
    <a href="#" >
      <div >Button 3</div>
    </a>
    <a href="#" >
      <div >Button 4</div>
    </a>
  </div>
</div>

CodePudding user response：

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 >
    <div >
        <div ><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"  x="17.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec3"  x="517.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec2"  x="17.5" y="518.42" width="500" height="500"></rect>
            <rect id="rec1"  x="517.5" y="518.42" width="500" height="500"></rect>
        </svg></div>
    </div>
    <div id="svg_trigger_div">
        <a href="#" >
            <div >Button 1</div>
        </a>
        <a href="#" >
            <div >Button 2</div>
        </a>
        <a href="#" >
            <div >Button 3</div>
        </a>
        <a href="#" >
            <div >Button 4</div>
        </a>
    </div>
</div>

CodePudding user response：

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