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) */
#parent1:hover>g {
filter: opacity(50%) blur(0px) brightness(80%);
}
/* fade ONE in on hover - SVG (Sector Groups) */
#parent1>g:hover {
filter: opacity(100%) blur(0px) brightness(100%);
}
#parent2:hover>g {
filter: opacity(0%) blur(0px) brightness(80%);
}
/* fade ONE in on hover - SVG (Sector Groups) */
#parent2>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='parent1' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'>
<g id='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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='parent1'>
<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>
<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='parent2' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'>
<g id='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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='parent2'>
<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>EDIT: I have modified the code to show 2 versions of the graph... my goal is to have a hybrid of the two. I want the center text to change when sectors are hovered over (like bottom graph), but only the sectors to dim and not disappear (like top graph - without the messy transparent text). Also, I don't want the center to cause any diming and to just behave as if the mouse is not over the SVG at all.
You probably got it all figured out with all the answers, but I have two points. First of all, you can use both the next-sibling combinator and the subsequent-sibling combinator to show/hide the text elements. Second, I like "constructing" SVGs, so I replaced your path elements with circle elements. If you have the data it is easy to calculate the length and rotation of the circle slices. Only drawback is that you need to mask off the spaces between the slices (here, just some line elements that are rotated).
I misunderstood the dim/no dim requirement, so here is an update. It concerns the following two selectors that both use the :has() pseudo-class. If the .background has a subsequent sibling .slice that is hovered, all subsequent siblings should dim. A more specific selector says, that if the subsequent sibling is hovered is should stay bright.
.background:has(~.slice:hover)~.slice {
filter: brightness(80%);
}
.background:has(~.slice:hover)~.slice:hover {
filter: brightness(100%);
}
* {
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;
}
.slice {
filter: brightness(100%);
}
.background:has(~.slice:hover)~.slice {
filter: brightness(80%);
}
.background:has(~.slice:hover)~.slice:hover {
filter: brightness(100%);
}
.slice+g {
filter: opacity(0%);
}
.slice:hover+g {
filter: opacity(100%);
}
.slice:hover~g.total {
filter: opacity(0%);
}<svg height="100vh" viewBox="0 0 500 500" font-family="Arial" font-weight="bold"
text-anchor="middle" dominant-baseline="middle" font-size="40" fill="white">
<g transform="translate(250 250)">
<circle class="background" r="250" fill="black" />
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#d35400"
stroke-width="100" stroke-dasharray="311 1000" pathLength="1000" />
<g>
<text>8.21 KH/s</text>
<text dy="40" font-size="20" fill="#444444">31.1%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#aa2200"
stroke-width="100" stroke-dasharray="246 1000" stroke-dashoffset="-311" pathLength="1000" />
<g>
<text>6.49 KH/s</text>
<text dy="40" font-size="20" fill="#444444">24.6%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#eb2f06"
stroke-width="100" stroke-dasharray="108 1000" stroke-dashoffset="-557" pathLength="1000" />
<g>
<text>2.86 KH/s</text>
<text dy="40" font-size="20" fill="#444444">10.8%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#c23616"
stroke-width="100" stroke-dasharray="102 1000" stroke-dashoffset="-665" pathLength="1000" />
<g>
<text>2.68 KH/s</text>
<text dy="40" font-size="20" fill="#444444">10.2%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#e67e22"
stroke-width="100" stroke-dasharray="87 1000" stroke-dashoffset="-767" pathLength="1000" />
<g>
<text>2.30 KH/s</text>
<text dy="40" font-size="20" fill="#444444">8.70%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#ffc500"
stroke-width="100" stroke-dasharray="83.8 1000" stroke-dashoffset="-854" pathLength="1000" />
<g>
<text>2.21 KH/s</text>
<text dy="40" font-size="20" fill="#444444">8.38%</text>
</g>
<circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#f39c12"
stroke-width="100" stroke-dasharray="62.5 1000" stroke-dashoffset="-937.8" pathLength="1000" />
<g>
<text>1.65 KH/s</text>
<text dy="40" font-size="20" fill="#444444">6.25%</text>
</g>
<g stroke="black" stroke-width="4" pointer-events="none">
<line y1="-140" y2="-240" />
<line y1="-140" y2="-240" transform="rotate(112)" />
<line y1="-140" y2="-240" transform="rotate(200.5)" />
<line y1="-140" y2="-240" transform="rotate(239.4)" />
<line y1="-140" y2="-240" transform="rotate(276)" />
<line y1="-140" y2="-240" transform="rotate(307.4)" />
<line y1="-140" y2="-240" transform="rotate(337.6)" />
</g>
<g class="total">
<text>26.41 KH/s</text>
<text dy="40" font-size="20" fill="#444444">$99.58 USD</text>
</g>
</g>
</svg>