Question

我有以下代码：

path:hover {
  opacity: 0.8;
}

text:hover {
  opacity: 0.8;
}

<div id="flow-graph-container" class="tab-pane fade in active">
  <svg width="444pt" height="180pt" viewBox="0.00 0.00 444.00 180.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="translate(-2.2653045654296875,154.89030933380127)scale(1)">
<g id="8" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M380.6667,-35C380.6667,-35 407.3333,-35 407.3333,-35 409.6667,-35 412,-37.3333 412,-39.6667 412,-39.6667 412,-44.3333 412,-44.3333 412,-46.6667 409.6667,-49 407.3333,-49 407.3333,-49 380.6667,-49 380.6667,-49 378.3333,-49 376,-46.6667 376,-44.3333 376,-44.3333 376,-39.6667 376,-39.6667 376,-37.3333 378.3333,-35 380.6667,-35"></path>
<text text-anchor="start" x="388.6663" y="-39.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:19</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M164.6667,-25C164.6667,-25 191.3333,-25 191.3333,-25 193.6667,-25 196,-27.3333 196,-29.6667 196,-29.6667 196,-34.3333 196,-34.3333 196,-36.6667 193.6667,-39 191.3333,-39 191.3333,-39 164.6667,-39 164.6667,-39 162.3333,-39 160,-36.6667 160,-34.3333 160,-34.3333 160,-29.6667 160,-29.6667 160,-27.3333 162.3333,-25 164.6667,-25"></path>
<text text-anchor="start" x="172.6663" y="-29.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
</g>
</svg>
</div>

g有一个id=5，一个有id=8。我想在引发悬停事件时更改g容器内所有元素的不透明度。我知道我可以用javascript做到这一点。我也可以在CSS中单独引用每个元素。但是，仅通过引用父g标记就可以更改CSS中的不透明度，以便在 g标记或其任何子标记上完成鼠标悬停时 ，那么所有孩子的不透明度都会改变吗？

Answer 1

尝试使用父g

＆＃13;

g:hover path,
g:hover text {
  opacity: 0.2;
}

＆＃13;

<div id="flow-graph-container" class="tab-pane fade in active">
  <svg width="444pt" height="180pt" viewBox="0.00 0.00 444.00 180.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="translate(-2.2653045654296875,154.89030933380127)scale(1)">
<g id="8" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M380.6667,-35C380.6667,-35 407.3333,-35 407.3333,-35 409.6667,-35 412,-37.3333 412,-39.6667 412,-39.6667 412,-44.3333 412,-44.3333 412,-46.6667 409.6667,-49 407.3333,-49 407.3333,-49 380.6667,-49 380.6667,-49 378.3333,-49 376,-46.6667 376,-44.3333 376,-44.3333 376,-39.6667 376,-39.6667 376,-37.3333 378.3333,-35 380.6667,-35"></path>
<text text-anchor="start" x="388.6663" y="-39.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:19</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M164.6667,-25C164.6667,-25 191.3333,-25 191.3333,-25 193.6667,-25 196,-27.3333 196,-29.6667 196,-29.6667 196,-34.3333 196,-34.3333 196,-36.6667 193.6667,-39 191.3333,-39 191.3333,-39 164.6667,-39 164.6667,-39 162.3333,-39 160,-36.6667 160,-34.3333 160,-34.3333 160,-29.6667 160,-29.6667 160,-27.3333 162.3333,-25 164.6667,-25"></path>
<text text-anchor="start" x="172.6663" y="-29.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
</g>
</svg>
</div>

＆＃13;

在悬停时更改`g`标记内所有元素的不透明度

1 个答案: