css - Hover Rollover Situation -
here basic code function want 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 question, have page of dozen products need hover work on. there better way create new class each product? or should create css , class each product?
if change shadow behind grey rectangle, set background products , insert product images transparent background img 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 { background: url(gray.png) bottom; width: 279px; width: 347px; display: block; } .products a:hover, .products a:focus { background-position: 0 0; }
and better throw away image , use css gradients , shadows.
if there different backgrounds have use separate classes (possibly partially shared css). can make images 1 save http requests using css sprites technique.
Comments
Post a Comment