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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -