:hover styles

[davidmatas]

Is there a way to generate :hover styles from the name of the image?

[twolfson]

Selectors for the css template can be defined via cssOpts.cssClass. For adding hover to all selectors, this can be done with:

cssOpts: {
  cssClass: function (item) {
    // Name CSS selector `.sprite-home:hover` for `home.png`
    return '.sprite-' + item.name + ':hover';
  }
}

[yuyokk]

Hi Todd,

I'm using the version 4.6.1 and I have the following task in the Gruntfile.js

sprite: {
  icons: {
    src: 'styles/img/sprites/icons/*.png',
    dest: 'styles/img/icons.png',
    destCss: 'styles/css/icons.css',
    cssTemplate: 'styles/img/sprites/sprite.mustache',
    cssOpts: {
      cssClass: function (item) {
          return '.sprite-' + item.name + ':hover';
      }
    }
  }
},

but still does not see the hover state in the resulted css. Can you please clarify what I'm doing wrong.

Thank you!

[twolfson]

@yuyokk There are a few things wrong with your setup:

• As of 3.0.0, cssClass has been renamed to cssSelector to be more generic
  • https://github.com/Ensighten/grunt-spritesmith/tree/4.6.1#breaking-changes-in-300
• You are using a custom CSS template. The cssSelector is used by the normal CSS template so your cssOpts are currently in vain.
  • https://github.com/twolfson/spritesheet-templates/blob/9.5.0/lib/templates/css.template.js#L15-L18

To remedy your issue, the clearest options are:

• Stop using a custom CSS template (i.e. remove cssTemplate)

sprite: {
  icons: {
    src: 'styles/img/sprites/icons/*.png',
    dest: 'styles/img/icons.png',
    destCss: 'styles/css/icons.css',
    cssOpts: {
      cssClass: function (item) {
          return '.sprite-' + item.name + ':hover';
      }
    }
  }
},

• Update your custom CSS template to append :hover classes
  • You can remove cssOpts as this is no longer used

[yuyokk]

@twolfson

this solution works for me.

Stop using a custom CSS template

Thank you for the reply. I appreciate it!

[Bogdaan]

Thank, useful feature