Как при наведении на div можно изменить цвет svg path средствами css?

Question

[miadiva]

Есть карта на svg с областями, названия которых добавлены через div-ы с абсолютным позиционированием. Нужно чтобы при наведении на название в диве менялся цвет path.
Примерная структура html:

<div id="map">
<svg style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="region" d="..." id="region_1"></path> 
<path class="region" d="..." id="region_2"></path> 
<path class="region" d="..." id="region_3"></path> 
</svg>
<div class="region_name name_region_1">Region 1</div>
<div class="region_name name_region_2">Region 2</div>
<div class="region_name name_region_3">Region 3</div>
</div>

Пробовала так:

#map .region_name:hover #map path {
fill:red;
}

Не помогло. Даже на знаю как реализовать такое...
Пожалуйста, подскажите.

Answer 1

[Anna_BS]

Вот пример реализации на js
codepen.io/jennbrewer/pen/LVLRaK