Mouse Hover not working as expected on SVG - css

Question

I have created SVG using illustrator, now I am using CSS for mouse hover effects.
The mouse hover stop working on parent element when it is hovered on the child element. I can't get to know why is it? Is it because the child elements are preventing the propogation of hover effect?
Here is the relevant SVG group:
<a target="_blank" href="#">
<g id="Technology">
<defs>
<rect id="SVGID_1_" x="191.825" y="377.344" width="37.1" height="33.539"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path class="pie-chunk" fill="#FFFFFF" d="M280.676 ....."/>
<path class="small-chunk" fill="#1387C9" d="M136.448,339.175c21.922,58.945,78.01,10...."></path>
<path class="pie-chunk" clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M225.97,381.062h-9.865 ..."/>
<path class="pie-chunk" clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M202.123,394.549v4 .... "/>
<text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-size="16">
TECHNOLOGY
</text>
</g>
</a>
Here is the CSS:
g#Technology:hover text tspan,
g#Technology:hover text{
fill: #fff;
}
g#Technology:hover .pie-chunk:hover{
fill: #5D5D5D;
opacity: 0.9;
}
g#Technology:hover .small-chunk{
fill: #1E3565;
}
Here is the JSFiddle to the problem.
To produce:
Hover over the Technology White Section, it will work fine.
Hover over the text (child element), it will make the hover effect
go weird.
Hover over the blue small section with icon, it will again go weird.
Can anyone please point me what I am doing wrong here?

Answer 1

Your problem is with your CSS.
g#Technology:hover .pie-chunk:hover{
fill: #5D5D5D;
opacity: 0.9;
}
You are either hovering the parent or the child, not both. Remove the second :hover and I think it will behave how you were expecting.
.svg-wrapper {
background: #ccc;
display: inline-block;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.svg-wrapper text,
.svg-wrapper tspan{
font-family: 'Open Sans';
font-weight: 700;
}
.small-chunk,
.pie-chunk{
transition: 0.8s;
}
g#Technology:hover text tspan,
g#Technology:hover text {
fill: #fff;
}
g#Technology:hover .pie-chunk {
fill: #5D5D5D;
opacity: 0.9;
}
<div class="svg-wrapper">
<svg id="Layer_1" width="570.049px" height="569.001px" viewBox="0 0 570.049 569.001">
<a target="_blank" href="http://headsinternational.com/focus/technology">
<g id="Technology">
<path class="pie-chunk" fill="#FFFFFF" d="M280.676,528.176l-0.049-46.825l-0.016-17.363l-0.023-21.567c-66.187-1.626-122.278-43.901-144.2-102.843
l-20.589,6.416l-16.972,5.292l-44.135,13.762l-39.215,12.225c38.068,110.46,142.233,190.113,265.238,191.729L280.676,528.176z"/>
<text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-family="'OpenSans-Extrabold'" font-size="16">TECHNOLOGY</text>
</g>
</a>
</svg>
</div>