CSS how to deal with a lot of sprite without having to create a new css class


Tags: html,css,css-sprites

Problem :

I have a list of image (around 30) and I want to create CSS sprite so that they are colored when hovered. The images all have the same size. The problem is that if I just want to have one css class, I have to put the background-image on the inline html like this :

CSS:

.sprite{
    background-position: 0 0;
    width: 185px;
    height: 100px;
}

.sprite:hover{
    background-position: 185px 0;
}

HTML:

<div class="sprite" style="background: url('image1');">
<div class="sprite" style="background: url('image2');">
<div class="sprite" style="background: url('image3');">
...

And it does not work. I only manage to do the sprite if I put the background image on the css but if I do this, I would have to create as many CSS classes as I have images which is not elegant at all. Do you have a better idea? (PS: I'm using Less CSS)



Solution :

The Problem is that you overwrite all background attributes inline (incl. -position); use:

style="background-image: url('image1');"

    CSS Howto..

    CSS horizontal scroller, how to position “below” before “right”?

    How can I have columns like this in CSS? (image)

    how can I use the CSS selector to solve this [duplicate]

    How can I remove the generic HTML/CSS tooltip? [duplicate]

    How to create a template that will show only in IE6 using javascript?

    How would I generate a css, js and html file using php?

    How to make content appear under absolute position

    How to make button that changes grid dimensions using JS?

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    API embeded code is sending