Question posted in 
I am having trouble getting SVG and CSS to play together to get the function I want. I want to be able to hover over the pie sectors of a graph and have the info in the middle change. I want the sector that is hovered over to remain and all other sectors to dim. Also, I don’t want any dimming to happen if you hover over the center circle. This is what I’ve come up with so far which is close. The text in the middle I’m having trouble with because it is layered (if filter: opacity(50%) is changed to 0% then the text behaves but all the other sectors vanish instead of dim). Any suggestions on how to make this behave?
* {
margin: 0px 0px 0px 0px;
/* Top Right Bottom Left */
padding: 0px 0px 0px 0px;
/* Top Right Bottom Left */
border: 0px solid #00FF00;
box-sizing: border-box;
}
body {
background-color: #002233;
color: #FFC355;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
overflow-y: scroll;
}
/* fade transitions on hover - DIV, SVG, TEXT */
#parent>div,
path,
text {
transition: 0.2s;
transition-delay: 5ms;
}
/* fade ALL out on parent hover - SVG (Sector Groups) */
#parent:hover>g {
filter: opacity(50%) blur(0px) brightness(80%);
}
/* fade ONE in on hover - SVG (Sector Groups) */
#parent>g:hover {
filter: opacity(100%) blur(0px) brightness(100%);
}<div>
<svg width='500px' height='500px' viewBox="0 0 500 500">
<circle cx='250' cy='250' r='240' stroke='black' fill='black' stroke-width='0' fill-opacity='1' />
<g id='parent' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'>
<g id='parent'>
<path d='M 250 250 L 250 25 A 225 225, 0, 0, 1, 458.7056796681 334.06508950971 Z'
fill='#d35400' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>8.21 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>31.1%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 458.7056796681 334.06508950971 A 225 225, 0, 0, 1, 171.59428106039 460.89699674856 Z'
fill='#aa2200' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>6.49 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>24.6%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 171.59428106039 460.89699674856 A 225 225, 0, 0, 1, 56.284491015906 364.45218031577 Z'
fill='#eb2f06' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>2.86 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>10.8%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 56.284491015906 364.45218031577 A 225 225, 0, 0, 1, 26.24340850501 226.37823540579 Z'
fill='#c23616' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>2.68 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>10.2%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 26.24340850501 226.37823540579 A 225 225, 0, 0, 1, 71.089441212269 113.55949298591 Z'
fill='#e67e22' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>2.30 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>8.70%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 71.089441212269 113.55949298591 A 225 225, 0, 0, 1, 163.8235888855 42.15720804554 Z'
fill='#ffc500' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>2.21 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>8.38%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 163.8235888855 42.15720804554 A 225 225, 0, 0, 1, 249.97751533812 25.000001123467 Z'
fill='#f39c12' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>1.65 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>6.25%</text>
</g>
<g id='parent'>
<path
d='M 250 250 L 249.97751533812 25.000001123467 A 225 225, 0, 0, 1, 250.01678524623 25.000000626099 Z'
fill='#425a62' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>0.42 H/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>0.00%</text>
</g>
<g id='parent'>
<path d='M 250 250 L 250.01678524623 25.000000626099 A 225 225, 0, , 1, Z' fill='' />
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'></text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'></text>
</g>
<g>
<circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0'
fill-opacity='1' />
<text x='250' y='240' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='40px' stroke-width='0' fill='#DDDDDD'>26.41 KH/s</text>
<text x='250' y='280' font-family='Arial' font-weight='bold' text-anchor='middle'
dominant-baseline='middle' font-size='20px' stroke-width='0' fill='#444444'>$99.58 USD</text>
</g>
</g>
</svg>
</div>
2
Answers
Ah, you are so close.
since everything is named "parent" it gets difficult to exclude the center part. so, what i did is name the individual sectors only as "parent". The mid part is not named anything, because we don’t want to change anything there.
And then have two styles in css – one which says that if a "parent" element is hovered over, keep its opacity, brightness at 100% (you could just not have a style and it should still work, i guess).
The other style is to tell that the mouse is hovered over the svg-container div, but is not hovered over a "parent" element, the lower the opacity and brightness.
Of course, the downside of this is that the sectors turn dull as soon as you are over the svg-container div.
SVG is much like HTML in the way of styling with CSS (there are some differences syntactically and some legacy code). The following is the relevant CSS that will enable the behavior you requested.
I also cleaned up the extra garbage that was copied and pasted and fixed 2 of the broken
<text>groups. To fix the rest of them you need to assign properxandycoordinates. Also there should be only 2<circle>s the rest have been removed. Moreover ids are unique (only one#parent!) so be careful when you copy HTML.