CODEWITHSUNDEEP
htmlcsssvg
Code Pope
Code Pope

Reputation: 5449

Change opacity of all element inside the `g` tag on hover

I have the following code: 

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>

There is a g with id=5 and one with id=8. I want to change the opacity of all elements inside the g container when hover event is raised. I know I can do that in javascript. Also I can reference every element separately in CSS. But is it possible to change the opacity in CSS by just referencing the parent g tag, so that when a mouse hover is done on the g tag or any of its children, then the opacity is changed for all the children?

Upvotes: 1

Views: 76

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Try to use a parent g

g:hover path,
g:hover text {
  opacity: 0.2;
}
<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>

Upvotes: 1

Related Questions