IE7-8 png on hover

IE7-8 png on hover

Hello,
I can't find a way to fix this.
Let's start with the code.

HTML
  1.      <div id="showcase_home">
  2.         <div class="shop"><a class="shop_hover"  href="?page=shop"></a></div>
  3.      </div> <!-- END showcase_home -->

CSS

  1.  .shop_hover{
  2.        background: url(img/shop_hover.png) no-repeat top;
  3.        width: 290px;
  4.        height:230px;
  5.        display:block;
  6.        padding:0;
  7.        margin:0;
  8.    }
  9.       div#showcase_home div.shop{
  10.        background:url(img/shop.png) no-repeat top;
  11.        margin-right:0;
  12.    }

Jquery

  1.     function fadehomepage() {
  2.    
  3.              //Set opacity  to 0
  4.              $('#showcase_home > div > a').css({'opacity':'0'});
  5.        
  6.            
  7.            
  8.             $('#showcase_home > div').hover(   
  9.                
  10.                     function () {
  11.                           var selected_div = $(this).attr("class") + "_hover";
  12.                           $(this).find('.' + selected_div).stop().fadeTo(500, 1)         
  13.                      },
  14.                
  15.                     function () {
  16.                           var selected_div = $(this).attr("class") + "_hover";
  17.                           $(this).find('.' + selected_div).stop().fadeTo(300, 0)                 
  18.                     }
  19.                
  20.             );
  21.     }

Basically is to fadeIn an image over another on hover, in IE7-8 the hover png image loses transparency showing black instead. I tried several fixes, the only one that worked was DD.roundies but, big BUT, the <a> link is not clickable anymore in fact that fix also breaks a lot of css rules applied to that element.
I'm wondering if anyone has a solution or if this is jquery's "fault".

thanks