CODEWITHSUNDEEP
csssvghovermousehover
nadiaeagle
nadiaeagle

Reputation: 47

Hover css on svg

I'm trying to do an hover effect with a svg. This is the effect I would like to achieve. When I do a mouseover on the two paths and the text, I want the other paths and texts to have a lower opacity (I did this part), but I also want the the percentage to appear. When the mouse isn't over anything, I want all the paths and texts to have an opacity of 1 and no percentage visible.
I used this code to change the opacity of the paths

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

This is the code: http://jsfiddle.net/ysrzjs28/

Upvotes: 2

Views: 502

Answers (1)

TonalLynx
TonalLynx

Reputation: 376

I refactored your html to include the percentage elements next to their respective graph elements. This made it easier to select the sibling element for display using CSS. Since there is no parent selector in CSS, you would have to use jQuery or javascript to achieve the results you want using pure CSS. I added a container g element and re-assigned your classes. The CSS looks like this

.container:hover > .tracciati {

  opacity: 0.25;

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

.percentuali {
  opacity: 0;
}

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

Here is a working fiddle: http://jsfiddle.net/ysrzjs28/2/

Upvotes: 2

Related Questions