Hover on part of SVG, change path fill - css

Question

I am trying to change the fill color of a path when I hover over it in an SVG. I can't seem to make it work. I am thinking it is a z-index issue.
I've tried every selector I can think of.
I've changed the order of the paths so they are the last elements in the svg.
I am trying to change the path's with the class .wedge
I've applied a global z-index using:
* {z-index: 1;}
Then on .wedge I increased the z-index:
.wedge {z-index: 10 !important;)
That didn't work.
Something I found interesting but not sure if it is relevant, I added a click function to change the fill color of one of the paths. That works and if you click it the hover will start working.
Here is a codepen:
Codepen
Any ideas?

Answer 1

Seems to be related to the
.st4 {
fill: none;
}
Changing that to:
.st4 {
fill: transparent;
}
and then using the regular :hover class of:
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
does the trick. Like this:
/*
* === CSS for SVG compass ===
*/
/*
* — Structural and appearance —
*/
* {
z-index: 1;
}
/* Contains compass and limits its size */
.compassWrap {
max-width: 40%;
margin: 0 auto;
}
/* probably needs adjusted */
/* SVG styles, no need to change */
.st0 {
fill: none;
stroke: #505050;
stroke-width: 4.11;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* don't change */
.st1 {
fill: none;
stroke: #808080;
stroke-width: 2.57;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* don't change */
.st2 {
fill: #505050;
}
/* don't change */
.st3 {
opacity: 0.5;
}
/* don't change */
.st4 {
fill: transparent;
}
/* don't change */
/*
* — Pie color classes —
Add the class to the path with the ID of the direction you want
Available path ID's
#nnwPie - north by north west
#wnwPie - west by north west
#wswPie - west by south west
#sswPie - south by south west
#ssePie - south by south east
#esePie - east by south east
#enePie - east by north east
#nnePie - north by north east
*/
.green {
fill: rgba(21, 255, 0, 0.5);
}
/* best wind */
.dgreen {
fill: rgba(12, 140, 0, 0.5);
}
/* less good wind */
.red {
fill: rgba(255, 42, 0, 0.5);
}
/* worst wind */
.dred {
fill: rgba(140, 23, 0, 0.5);
}
/* less bad wind */
.wedge {
z-index: 10 !important;
}
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
/* best wind */
/*
* === Arrow ===
*/
/* adjust the center point and make arrow wiggle at all times */
#arrow {
transform-origin: 50% 59.7%;
animation-name: wiggle;
animation-duration: 1s;
animation-fill-mode: forward;
animation-iteration-count: infinite;
}
/*
* === ADD CLASS TO #arrow to move to location and wiggle ===
*/
.north#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorth, wiggleNorth;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.northEast#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorthEast, wiggleNorthEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.east#arrow {
transform-origin: 50% 59.7%;
animation-name: spinEast, wiggleEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.southEast#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouthEast, wiggleSouthEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.south#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouth, wiggleSouth;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.southWest#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouthWest, wiggleSouthWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.west#arrow {
transform-origin: 50% 59.7%;
animation-name: spinWest, wiggleWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.northWest#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorthWest, wiggleNorthWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
/*
* === Animations to make #arrow spin ===
*/
/* Spin north Animation */
#keyframes spinNorth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
/* Spin north east Animation */
#keyframes spinNorthEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
/* Spin east Animation */
#keyframes spinEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(135deg);
}
}
/* Spin south east Animation */
#keyframes spinSouthEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
/* Spin south Animation */
#keyframes spinSouth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(225deg);
}
}
/* Spin south west Animation */
#keyframes spinSouthWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
/* Spin west Animation */
#keyframes spinWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(315deg);
}
}
/* Spin north west Animation */
#keyframes spinNorthWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
/* 360 because this is the starting point of #arrow */
}
}
/*
* === WIGGLES for each direction ===
*/
/* Wiggle north Animation */
#keyframes wiggleNorth {
0% {
transform: rotate(46deg);
}
50% {
transform: rotate(44deg);
}
100% {
transform: rotate(46deg);
}
}
/* Wiggle north east Animation */
#keyframes wiggleNorthEast {
0% {
transform: rotate(91deg);
}
50% {
transform: rotate(89deg);
}
100% {
transform: rotate(91deg);
}
}
/* Wiggle east Animation */
#keyframes wiggleEast {
0% {
transform: rotate(136deg);
}
50% {
transform: rotate(134deg);
}
100% {
transform: rotate(136deg);
}
}
/* Wiggle south east Animation */
#keyframes wiggleSouthEast {
0% {
transform: rotate(181deg);
}
50% {
transform: rotate(179deg);
}
100% {
transform: rotate(181deg);
}
}
/* Wiggle south Animation */
#keyframes wiggleSouth {
0% {
transform: rotate(226deg);
}
50% {
transform: rotate(224deg);
}
100% {
transform: rotate(226deg);
}
}
/* Wiggle south west Animation */
#keyframes wiggleSouthWest {
0% {
transform: rotate(271deg);
}
50% {
transform: rotate(269deg);
}
100% {
transform: rotate(271deg);
}
}
/* Wiggle west Animation */
#keyframes wiggleWest {
0% {
transform: rotate(316deg);
}
50% {
transform: rotate(314deg);
}
100% {
transform: rotate(316deg);
}
}
/* Wiggle north west Animation */
#keyframes wiggleNorthWest {
0% {
transform: rotate(361deg);
}
50% {
transform: rotate(359deg);
}
100% {
transform: rotate(361deg);
}
}
/*
* === wiggle when no direction ===
*/
#keyframes wiggle {
0% {
transform: rotate(1deg);
}
50% {
transform: rotate(-1deg);
}
100% {
transform: rotate(1deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compassWrap">
<svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
<title>compass</title>
<line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
<line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
<line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
<line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
<line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
<line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
<line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
<line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
<path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
<path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
<polygon id="arrow" class="st2" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3
73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3
34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4
76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
<path id="nnwPie" class="st4 wedge" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
<path id="wnwPie" class="st4 wedge" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
<path id="wswPie" class="st4 wedge" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
<path id="sswPie" class="st4 wedge" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
<path id="ssePie" class="st4 wedge" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
<path id="esePie" class="st4 wedge" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
<path id="enePie" class="st4 wedge" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
<path id="nnePie" class="st4 wedge" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
</svg>
</div>