Hover effect on icons

Is it possible to build sprite with :hover pseudo-class in css? For example:

The icon folder contains icons for normal state and hover state:

icns
    ├── print.png
    └── print_hover.png

gulp task

var pngSprite = require('gulp.spritesmith');
gulp.task('sprite-png', function () {
    return gulp.src('./icons')
        .pipe(pngSprite({
            imgName: 'sprite.png',
            cssName: 'sprite.css',
            // this is what I want
            hoverImageName: function (name) {
               return name + '_hover';
            }
        }))
        .pipe(gulp.dest('./sprite'));
});

I am expecting to see something like this in css file

.icons-print {                                                                                                                                                                                              
  background-image: url(./sprites/sprite.png);                                                                                                                                                      
  background-position: -734px -618px;                                                                                                                                                                              
  width: 16px;                                                                                                                                                                                                     
  height: 16px;                                                                                                                                                                                                    
}                                                                                                                                                                                                                  
.icns-print:hover {                                                                                                                                                                                           
  background-image: url(./sprites/sprite.png);                                                                                                                                                      
  background-position: -683px -618px;                                                                                                                                                                              
  width: 16px;                                                                                                                                                                                                     
  height: 16px;                                                                                                                                                                                                    
}            

[Andrew-Dyachenko]

Unfortunatly propery: cssClass, is deprecated in 3.0.0 version of grunt-spritesmith, now use property: cssSelector instead. My code finally has worked after some edit:

sprite: {
    all: {
        src: 'assets/images/sprite/*.*',
        dest: 'dist/images/sprite/sprite.png',
        cssFormat: 'css',
        destCss: 'dist/css/sprite.css',
        cssOpts: {
            cssSelector: 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;
                }
            }
        }
    }
}

[twolfson]

For non-CSS templates, you can leverage the provided sprite mixin. Here is an example for SCSS:

.icon-email {
  @include sprite($icon-email);

  &:hover {
    @include sprite($icon-email-hover);
  }
}