> 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/

Reply via email to