| 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 |
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
Mar 29, 2013
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.
Mar 29, 2013
An addendum to my previous comment, this only works for pseudo elements like :before and :after, not pseudo classes like :hover :\ |