On hover over link changes padding of individual SVG polygon
I have a list of rooms in the left column and an SVG floor plan in the right column. I have two questions:
Is there a way to change the color of the room in the floor plan when the link in the left column is flipped using pure CSS?
If the answer is no, what approach do I take? I am assuming something like JS, but not sure where to start or what to look for.
Here's a working example where I am so far:
div#list {float:left; width:50%}
div#list ul li a {color:#333}
div#list ul li a:hover {color:#ED5D45}
div#map {float:right; width:50%}
div#map svg#plan polygon.building {fill:#CCC}
div#map svg#plan a polygon.studio-j {fill:#333}
div#map svg#plan a:hover polygon.studio-j {fill:#ED5D45}
<div id="list">
<ul>
<li class="j"><a href="/studios/j/">Studio J</a></li>
</ul>
</div>
<div id="map">
<svg id="plan" x="0" y="0" viewBox="0 0 412 408" enable-background="new 0 0 412 408" xml:space="preserve">
<polygon class="building" points="0,68.1 377.2,0 411,407.3 20,405.7 "/>
<a xlink:href="/studios/j/" xlink:title="Studio J">
<polygon class="studio-j" points="214,126 261,126 261,131 388,131 377.2,0.4 213.5,30.2 "/>
</a>
</svg>
</div>
The spell is here: https://jsfiddle.net/morgyface/7utpx1n6/
+3
source to share
1 answer
This is not possible with CSS, given the structure, since the link is not SVG related.
JS which will simplify the problem.
Alternatively, just put the links inside a div #map
(no list structure) and adjust your CSS accordingly.
a:hover {
color: red
}
div#map {
float: right;
width: 50%
}
div#map svg#plan polygon.building {
fill: #CCC
}
svg#plan a polygon.studio-j {
fill: #333
}
svg#plan a:hover polygon.studio-j {
fill: #ED5D45
}
.j:hover + svg#plan a polygon.studio-j {
fill: green;
}
<div id="map">
<a class="j" href="/studios/j/">Studio J</a>
<svg id="plan" x="0" y="0" viewBox="0 0 412 408" enable-background="new 0 0 412 408" xml:space="preserve">
<polygon class="building" points="0,68.1 377.2,0 411,407.3 20,405.7 " />
<a xlink:href="/studios/j/" xlink:title="Studio J">
<polygon class="studio-j" points="214,126 261,126 261,131 388,131 377.2,0.4 213.5,30.2 " />
</a>
</svg>
</div>
+1
source to share