When a customer mouseOver(s) a product thumbnail, how do I get a BORDER to display on only the thumbnail image?
ps. I tried adding (ie. class=⌠borderit■ to the product_thumbnail.tpl code but on the store the border rollover is not displaying.
#####
In my skin1/product_thumbnail.tpl I have the below code:
{if $config.Appearance.show_thumbnails eq "Y"}<IMG id="{$id}" src="{if $tmbn_url}{$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/{if $extra}extra_{/if}image.php?productid={$productid}{if $file_upload_data.file_path}&tmp=y{/if}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} alt="{$product|escape}" class=⌠borderit■>{/if}
In my skin1.css I have the below css:
.borderit img{
border: 1px solid #FFFFFF;
}
.borderit:hover img{
border: 1px solid #DD0D75;
}
.borderit:hover{
color: DD0D75; /* irrelevant definition to overcome IE bug */
}
#####