How to display a border on the rollover for thumbnails
 

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 */
}

#####

Re: How to display a border on the rollover for thumbnails
 

I've only just taken a quick look over your post, so I apologise in advance if this is wrong, but perhaps your CSS for borderit should refer to <img />, rather than a class that 'encloses' the <img />, like so:

img.borderit {
border: 1px solid #FFFFFF;
}
img.borderit:hover {
border: 1px solid #DD0D75;
}
img.borderit:hover{
color: DD0D75; /* irrelevant definition to overcome IE bug */
}

Re: How to display a border on the rollover for thumbnails
 

i use this

class=⌠borderit■ onmouseover="this.className=''borderitover'" onmouseout="this.className='borderit'"


css
.borderit {
border: 1px solid #FFFFFF;
}

.borderitover{
border: 1px solid #DD0D75;
}