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