Подскажите, пожалуйста, у меня есть код, с одной стороны схема этажа с квартирами в svg, с другой ссылки на эти квартиры, какой код мне нужно написать, чтобы при наведении на ссылку подсвечивалась именно та квартира на плане, которая описана в ссылке и наоборот при наведении мышью на плане на квартиру подсвечивалась бы ссылка с той квартирой? Как-то их связать по data атрибуту? Только начинаю постигать азы программирования и не хватает мозгов)) У меня получилось подсветить и то и другое, но оно подсвечивается всё целиком, и я не понимаю, как это сделать по отдельности.
$(document).ready(function () {
const flatPath = $('.flats path');
const flatLink = $('.flat-list__link');
flatLink.on('mouseover', function () {
flatPath.toggleClass('current-flat');
});
flatPath.on('mouseover', function () {
flatLink.toggleClass('flat-list__link_active');
});
});
.popup {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: scale(0);
transition: opacity 0.2s;
}
.popup_opened {
opacity: 1;
transform: scale(1);
}
.popup_opened > .popup__floor-plan {
opacity: 1;
transform: translateY(0);
}
.popup__floor-plan {
position: relative;
max-width: 1000px;
min-height: 565px;
background-color: #FFF;
flex-grow: 1;
display: flex;
opacity: 0;
transform: translateY(-10%);
transition: transform 0.2s, opacity 0.2s;
transition-delay: 0.2s;
}
.popup__close-button {
position: absolute;
right: 27px;
top: 38px;
border: none;
background-color: #EBEBEB;
cursor: pointer;
}
.popup__image {
width: 60%;
text-align: center;
padding: 50px;
}
.popup__title {
font-family: 'Bebas Neue Book', sans-serif;
font-size: 24px;
line-height: 1.2;
margin: 0 0 25px;
color: #000000;
}
.popup__counter {
font-family: 'Bebas Neue Book', sans-serif;
font-size: 24px;
line-height: 1.2;
color: #000000;
}
.flats path {
opacity: 0;
cursor: pointer;
}
path.current-flat {
opacity: 1;
}
.flats path:hover {
opacity: 1;
}
.popup__info {
padding: 50px 46px;
width: 40%;
background-color: #EBEBEB;
display: flex;
flex-direction: column;
justify-content: center;
}
.flat-list {
list-style-type: none;
padding: 0;
margin: 55px 0 0;
}
.flat-list__item {
margin-bottom: 10px;
}
.flat-list__link {
color: #635854;
font-weight: normal;
font-size: 16px;
line-height: 1.18;
text-decoration: none;
}
.flat-list__link:hover {
color: #3596F5;
text-decoration: underline;
}
.flat-list__link_active {
color: #3596F5;
text-decoration: underline;
}
.popup__alert {
color: #635854;
font-style: italic;
font-size: 16px;
line-height: 1.18;
text-decoration: none;
margin: 50px 0 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="popup popup_opened">
<div class="popup__floor-plan">
<button class="popup__close-button">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L26 26" stroke="#3596F5" stroke-width="3"/>
<path d="M26 2L2 26" stroke="#3596F5" stroke-width="3"/>
</svg>
</button>
<div class="popup__image">
<h3 class="popup__title">Этаж <span class="popup__counter counter__floor">02</span></h3>
<svg class="flats" width="433" height="408" 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="./images/floor-plan.jpg"/>
<path data-flat="1" d="M388 81V141H314V148H267.5V131H247V32.5H338.5V16H405V81H388Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="2" d="M314 148.5H268V200H367.5V205H387.5V141H314V148.5Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="3" d="M314.192 252.662H268V200H367.916V204.602H388V268H314.192V252.662Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="4" d="M314 253H268.5V309H295.5V376H340V393H405V328.5H388V268.5H314V253Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="5" d="M218 394.5V264H247.5V273.5H267.5V310.5H294.5V375H259.5V394.5H218Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="6" d="M217 394.5V264H187.5V273.5H167.5V310.5H140.5V375H175.5V394.5H217Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="7" d="M121 252H166.5V309H139.5V376H95V393H30V328.5H47V273.5H121V252Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="8" d="M119.5 273.5H46V198H167V250.822H119.5V273.5Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="9" d="M124.729 116H46V198H167V145.178H124.729V116Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat="10" d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6" fill-opacity="0.75"/>
</svg>
</div>
<div class="popup__info">
<h3 class="popup__title">Выберите квартиру</h3>
<ul class="flat-list">
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="1">2 комн. 64,5 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="2">1 комн. 38,9 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="3">1 комн. 35,9 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="4">2 комн. 56,0 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="5">1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="6">1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="7">2 комн. 58,4 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="8">1 комн. 32,3 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="9">1 комн. 29,9 кв. м.</a>
</li>
<li class="flat-list__item">
<a href="" class="flat-list__link" data-flat="10">3 комн. 75,2 кв. м.</a>
</li>
</ul>
<p class="popup__alert">Квартиры, отмеченные серым, уже выкуплены.</p>
</div>
</div>
</article>