- This topic is empty.
August 18, 2014 at 7:31 am #179457
But then found out :hover-ing on a referenced SVG does not work.
When talking with a colleague we ended up with this, so you can hover on a element and activate a other element
But this only work down not upAugust 18, 2014 at 8:34 am #179462
CSS cannot affect elements higher up in the DOM (yet)…so your selector only works downwards….it cannot work the other way round.
For that you need JS/JQ.
Also, when using a
<use>element…no you cannot target individual paths etc within the definition using CSS.August 18, 2014 at 8:37 am #179463August 18, 2014 at 8:39 am #179464
Sorry, was looking a the second CP….edited.August 18, 2014 at 8:50 am #179465
updated the pen.
If you just call the svg you can change the color on hover. Is there any other way to have the CSS update with interaction of a user? I picked :hover cause it was easy to demonstrate.August 18, 2014 at 8:59 am #179467
It depends on what you want to do?
In general, when it comes to changes in SVG you are limited to what CSS can do.
JS/JQ lets you do more…and there are libraries written for that including Raphael.js and Snap.svg
If it wish to continue using <use> and swap out ‘elements’ &/or ‘classes’…it can be done with Js/JQ but it can get a little messy.August 18, 2014 at 9:22 am #179476
All i want is to change the purpose if my menu icon with SVG when the menu is open or wen the menu should close.August 18, 2014 at 10:06 am #179487
Using a hover…or a click?
If it’s a hover…you’re nearly there otherwise it’s JS for clicks etc.August 18, 2014 at 10:08 am #179489
but then i still cant use the <use xlink:href method right?August 18, 2014 at 10:20 am #179493
but then i still cant use the <use xlink:href method right?
Using JS/JQ there are things you can do even with the
<use>element, switching classes, animating the whole thing but referencing elements inside the
<use>then not really…
Although constructing the SVG using JS (I’ve been playing with Snap today) seems a nice option but I haven’t dug into it very deeply.August 19, 2014 at 5:13 am #179805August 19, 2014 at 5:17 am #179806
- The forum ‘CSS’ is closed to new topics and replies.