:hover and :active on SVG elements

:hover and :active on SVG elements

( To test and see differences between :hover and :active )
( click and / or maintain mouse bouton pressed )
( tap and / or touch long with tactile devices )

<svg width="200" height="200"> 
    <circle id="ball" cx="75px" cy="75px" r="50"/>
    <circle cx="125px" cy="125px" r="50" fill="yellow"/>
</svg>

Firstly, to css styling Html elements, we must not forgot that inline styling ( inside the tag ) is prioritary on others rules ( except for the exclamtion sign '!' priority ).

Target the <svg> element technically means the container box... as we generaly expect childs selection. So, instead of:

svg { fill:green; }

... which do colorate all childs elements of the <svg> without inline declaration, we prefer target more accuratly as in this working example:

svg circle { fill:green; }
svg circle:hover { fill:red; }
#ball:active { fill:blue; }

On the first ruke, we target all circle element to be filled in green: it is applied only on one, because the second have an attribut already set to yellow inline.
Second rule, we define a :hover rule to fill the same target at previous in red. This time, the two elements are filled in red on touch/click, because declaration inline cannot set css pseudo-classes rules.
But in third line we only define a :active on only one of the circles, targetting it with its id... coloring it in blue.

Obviously, if we target an element which is parent, the rule will propagate in the childs tree, like any html element...