Pseudo Classes

Using the filename

Using the filename of the source images you can customize the pseudo class related to the images, so if you simply append __hover to the filename glue will add :hover to the CSS class name:

buttons
├── pay.png
└── pay__hover.png

Using this simple convention you can create for example create button sprites like:

_images/buttons.png

And generate automatically the following css:

.sprite-buttons-pay{background-image:url(buttons.png);background-repeat:no-repeat}
.sprite-buttons-pay:hover{background-position:0px 0px;width:174px;height:62px;}
.sprite-buttons-pay{background-position:0px -62px;width:174px;height:62px;}

Note

You can use multiple pseudo-classes at the same time __hover__before.png

Note

pseudo-class separator use to be _. Since glue 0.9 it is __. If you don’t want / you can’e rename all your files, you can use --pseudo-class-separator=_ in order to make glue work in legacy mode.

Available pseudo classes

Glue will only detect the following pseudo-classes: link, visited, active, hover, focus, first-letter, first-line, first-child, before and after.