Как затемнить объекты SVG при наведении курсора мыши ⇐ CSS

[Anonymous]

У меня возникли проблемы с совместным использованием SVG и CSS для получения нужной функции. Я хочу иметь возможность наводить курсор на секторы круговой диаграммы и изменять информацию в середине. Я хочу, чтобы сектор, над которым наведен курсор, оставался, а все остальные сектора затемнялись. Кроме того, я не хочу, чтобы происходило затемнение, если вы наведете курсор на центральный круг. Это то, что я придумал на данный момент, и это близко. С текстом посередине у меня возникают проблемы, потому что он многослойный (если фильтр: непрозрачность (50%) изменен на 0%, тогда текст ведет себя хорошо, но все остальные сектора исчезают, а не тускнеют). Есть какие-нибудь предложения о том, как это вести себя?

Код: Выделить всё

* {
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%);
}

Код: Выделить всё

8.21 KH/s
31.1%




6.49 KH/s
24.6%




2.86 KH/s
10.8%




2.68 KH/s
10.2%




2.30 KH/s
8.70%




2.21 KH/s
8.38%




1.65 KH/s
6.25%




0.42 H/s
0.00%









26.41 KH/s
$99.58 USD

Подробнее здесь: https://stackoverflow.com/questions/790 ... ouse-hover