如何根据单独的 HTML 元素的 hover 更改 SVG 元素的填充？

Question

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>

Answer 1

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

Answer 2

 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>