JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div class="container">

  <svg class="flats" width="200" height="200" viewBox="0 0 433 408" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image id="image0" width="433" height="408" xlink:href="/img/floor.png" />
    <path data-flat="40" d="M388 81V141H314V148H267.5V131H247V32.5H338.5V16H405V81H388Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="41" d="M314 148.5H268V200H367.5V205H387.5V141H314V148.5Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="42" d="M314.192 252.662H268V200H367.916V204.602H388V268H314.192V252.662Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="43" d="M314 253H268.5V309H295.5V376H340V393H405V328.5H388V268.5H314V253Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="44" d="M218 394.5V264H247.5V273.5H267.5V310.5H294.5V375H259.5V394.5H218Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="45" d="M217 394.5V264H187.5V273.5H167.5V310.5H140.5V375H175.5V394.5H217Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="46" d="M121 252H166.5V309H139.5V376H95V393H30V328.5H47V273.5H121V252Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="47" d="M119.5 273.5H46V198H167V250.822H119.5V273.5Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="48" d="M124.729 116H46V198H167V145.178H124.729V116Z" fill="#3595F6" fill-opacity="0.75" />
    <path data-flat="49" d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6" fill-opacity="0.75" />
  </svg>


  <ol>
    <li data-flat="40"> кв.40 </li>
    <li data-flat="41"> кв.41 </li>
    <li data-flat="42"> кв.42 </li>
    <li data-flat="43"> кв.43 </li>
    <li data-flat="44"> кв.44 </li>
    <li data-flat="45"> кв.45 </li>
    <li data-flat="46"> кв.46 </li>
    <li data-flat="47"> кв.47 </li>
    <li data-flat="48"> кв.48 </li>
    <li data-flat="49"> кв.49 </li>
  </ol>
</div>

CSS

.container {
  display: flex;
}
path.active {
  fill: red;
}
li.active {
  background-color: red;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1036496
 * Как сделать так, чтобы при наведении на отдельную квартиру (path) менялся стиль ссылки, соответствующей этой квартире?
 */
const svg = document.querySelector('svg');
const list = document.querySelector('ol');

const flatOn = (flat, isOn) => {
  const method = isOn ? 'add' : 'remove';
  svg.querySelector(`path[data-flat="${flat}"]`).classList[method]('active');
  list.querySelector(`li[data-flat="${flat}"`).classList[method]('active');
}

const onMouseOver = (e) => {
  const flat = e.target.dataset['flat'];
  flatOn(flat, true);    
}

const onMouseOut = (e) => {
  const flat = e.target.dataset['flat'];
  flatOn(flat, false);    
}

svg.querySelectorAll('path').forEach((p) => {
  p.addEventListener('mouseover', onMouseOver);
  p.addEventListener('mouseout', onMouseOut);
});

list.querySelectorAll('li').forEach((li) => {
  li.addEventListener('mouseover', onMouseOver);
  li.addEventListener('mouseout', onMouseOut);
});