M
M
miadiva2016-01-09 14:41:02
css
miadiva, 2016-01-09 14:41:02

How can I change the color of the svg path using css when hovering over a div?

There is a map on svg with areas whose names are added via divs with absolute positioning. It is necessary that when you hover over the name in the div, the color of the path changes.
Sample html structure:

<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>

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

Did not help. I don't even know how to implement this...
Please, tell me.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anna_BS, 2016-01-09
@Anna_BS

Here is an implementation example at js
codepen.io/jennbrewer/pen/LVLRaK

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question