Sprite for :hover states?

[sahibalejandro]

Is there an option or something to generate :hover states for the sprites?

for example, having button.png and button-hover.png generates css:

.icon { ... }
.icon-button {
  background-position: ...
  ...
}
.icon-button:hover {
  background-position: ...
}

Compass sprite generator has this feature :(

[alexkaraman85]

You can use a template to setup your own output.

[sahibalejandro]

Mustache is "logic-less", this can't be done only using basic template tags, it needs an if with some RegExp validation to detect the -hover suffix on the image name and then generate the :hover styles.

Any ideas?

[aslansky]

Hopefully you can wait a few more days. In css-sprite 1.0 handlebars is used to generate the style. This will give much more flexibility. So creating a hover style can be achieved more easily. I just need a few more days to finish up all the changes.

[sahibalejandro]

Thank you, I'm tuned.

[ghostcode]

i need this。

gulp.spritesmith do like this:

sprites: {
  src: srcAssets + '/images/sprites/icon/*.png',
  dest: {
    css: srcAssets + '/scss/base/',
    image: srcAssets + '/images/sprites/'
  },
  options: {
    cssName: '_sprites.scss',
    cssFormat: 'css',
    cssOpts: {
      cssClass: function (item) {
        // If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')
        if (item.name.indexOf('-hover') !== -1) {
          return '.icon-' + item.name.replace('-hover', ':hover');
          // Otherwise, use the name as the selector (e.g. 'home' -> 'home')
        } else {
          return '.icon-' + item.name;
        }
      }
    },
    imgName: 'icon-sprite.png',
    imgPath: '/assets/images/sprites/icon-sprite.png'
  }
}

[aslansky]

css-sprite 1.0.0 is out ... it's called sprity. it now uses handlebars as the template language. So more logic is possible whithin the templates. If this is not enough, have a look at How to write a sprity style processor. Let me know if you need more information ...

[sahibalejandro]

Thanks, I will check it. On May 13, 2015 6:40 AM, "Alexander Slansky" [email protected] wrote:

css-sprite 1.0.0 is out ... it's called sprity https://github.com/sprity/sprity. it now uses handlebars as the template language. So more logic is possible whithin the templates. If this is not enough, have a look at How to write a sprity style processor https://github.com/sprity/sprity/wiki/How-to-write-a-sprity-style-processor. Let me know if you need more information ...

— Reply to this email directly or view it on GitHub https://github.com/aslansky/css-sprite/issues/65#issuecomment-101636224.

[trisys3]

Did you ever succeed in doing this?

[sahibalejandro]

Using sprite smith, yes.