My favorites | Sign in
Project Home Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 88: Add support for the various pseudo-classes (hover, at least)
4 people starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


 
Reported by rafael.a...@gmail.com, Feb 8, 2011
If it's at all possible for SpriteMe to recognize and add images used for the :hover pseudo-class into the generated sprite and CSS code, this tool would be at least 100% more useful and save a ton of work. 

(If I've missed something somewhere that allows this already, please let me know.)
Jun 26, 2011
#1 jnorris...@gmail.com
Yes please do this. What is the point of SpriteMe if I have to make a ton of little sprites first for it to pick up the image?
Mar 29, 2013
#2 gera...@gmail.com
This is the one issue which would keep me from using this really clever tool.

That being said, I was able to get pseudo elements/classes working here:

http://spriteme.mysmilies.com/spriteme.js

In SpriteMe.getBgImages I added an array of pseudo elements to cycle through: var pseudos = ["", ":hover", ":after", ":before"];

Passed the pseudo value to SpriteMe.getStyleAndUrl

SpriteMe.getStyleAndUrl then used the value like so: var style = elem.ownerDocument.defaultView.getComputedStyle(elem, pseudo);

When a new SpriteMe.ImageElement object is made I passed the pseudo class used to make it: new SpriteMe.ImageElement(elem, bgImage, pseudo);

The new .pseudo property is then used in other methods to get position info, etc.

It's not 100%, but at least the sprites will be added to the generated spritesheet.

Issues:
- When the spritesheet is applied it targets the element without the pseudo class (you'll see what I mean).
- When the css is generated I don't think it's understanding how to position the spritesheet correctly (I'm seeing 50% 50% on the right arrow on my test here: http://test.mysmilies.com/sprites/index2.html )
- I have only tested this in Chrome.

I'd love it if this could find its way into a release! Thanks for the great tool.
spriteme.js
176 KB   View   Download
Mar 29, 2013
#3 gera...@gmail.com
An addendum to my previous comment, this only works for pseudo elements like :before and :after, not pseudo classes like :hover :\

Powered by Google Project Hosting