Hover Rollover Situation

Question

Here is the basic code for the function I want to do:

<style>

.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}

.cmaxx_rollover:hover {
background-position: 0 0;}

</style>

<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>

So now the question, I have a page of about a dozen products that I need this hover to work on. Is there a better way to do it than to create a new class for each product? Or should I just create the CSS and class for each product?

Answer 1

If you only change the shadow behind the grey rectangle, you could set it as background for all the products and insert product images with transparent background as img like this:

<div class="products">
<a href="..."><img src="cmaxx.png" alt="CMAXX"></a>
<a href="..."><img src="productx.png" alt="Product X"></a>
</div>

With simple style:

.products a {
    background: url(gray.png) bottom;
    width: 279px;
    width: 347px;
    display: block;
}

.products a:hover, .products a:focus {
    background-position: 0 0;
}

And even better you could throw away the image and use CSS gradients and shadows.

If there will be different backgrounds you will have to use separate classes (possibly with partially shared css). You can also make the images to one to save http requests using css sprites technique.

Answer 2

From what it sounds like, you just need to give the same class name to each item and then implement the hover behavior once. That's all it really takes. So give

class="cmaxx_rollover"

to each product and keep your CSS as is and it'll work on all of them.