> On Apr 5, 2016, at 04:22, Crest Christopher <crestchristop...@gmail.com> > wrote: > > The hover works, but the sprite doesn't animate upon hover ? > > a { > height:23px > margin-top: -21px > display:block; > } > > a:hover { > background-position:0 -1225px // The sprite actual width > background:url ('spriteimage.png') > > If I apply the width of the sprite to the anchor, the element gets > re-positioned, as the CSS-Tricks site mentions to do but in my case as I > said, it gets re-positioned and I don't want that.
If I understand correctly: 1/ you have an animation defined **inside** the SVG file and 2/ that SVG file is loaded as a background-image. The you want to have that animation play when your pointer hovers over the image. I don’t think that ought to work. Animations defined inside the SVG will only work if the SVG image is embedded directly inside the HTML. Like this: <a href="/foo"><svg>………</svg></a> Sara Soueidan has some examples of animations on hover (scroll down): https://sarasoueidan.com/tools/circulus/ There is lots of useful info about SVG on her site. Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/