将 css 悬停在 svg 上

Question

我正在尝试使用 svg 制作悬停效果。 This是我想要达到的效果。当我将鼠标悬停在两个路径和文本上时，我希望其他路径和文本具有较低的不透明度（我做了这部分），但我也希望百分比出现。当鼠标不在任何东西上时，我希望所有路径和文本的不透明度都为 1，并且没有百分比可见。
我使用此代码更改路径的不透明度

.tracciati:hover > g {
    opacity: 0.25;
}
.tracciati:hover > g:hover {
    opacity: 1;
}

这是代码：http://jsfiddle.net/ysrzjs28/

Answer 1

我重构了您的 html 以在各自的图形元素旁边包含百分比元素。这使得使用 CSS 更容易 select 显示兄弟元素。由于 select 或 CSS 中没有父级，因此您必须使用 jQuery 或 javascript 才能使用纯 CSS 获得您想要的结果。我添加了一个容器 g 元素并重新分配了你的类。 CSS 看起来像这样

.container:hover > .tracciati {

  opacity: 0.25;

}
.container:hover > .tracciati:hover {
    opacity: 1;
}

.percentuali {
  opacity: 0;
}

.tracciati:hover + .percentuali {
  opacity: 1;
}

这是一个有效的 fiddle：http://jsfiddle.net/ysrzjs28/2/

将 css 悬停在 svg 上

Hover css on svg

css

svg

hover

mousehover