IE7 turns the edges of my rollover images black
<p>I am using jquery script for my image rollovers and I am encountering a problem in IE7 only where all of my images load in properly but once you rollover the image and roll out the edge of the top image turns black. Does anyone have any idea as to what might be causing this. The site can be found at free-to-be-me.com/ask-ava.php.</p>

<p>Here is the code i am using:</p>

<pre><code>    $(function() {
        $(".bw").hover(function() {
            $(this).animate({ opacity: 0.0 }, 200);
        });
    });

    $(function() {
        $(".bw").mouseout(function() {
            $(this).animate({ opacity: 1.0 }, 200);
        });


&lt;div class='liner-nav'&gt;
    &lt;div class='container'&gt;
         &lt;a class='html' href='ava-lb/options.html' style='border:none;' rel='group'&gt;&lt;img src='images/ava/School_pink.png' class='bw' style='border:none;' /&gt;&lt;/a&gt;
         &lt;img src='images/ava/School_blue.png' class='colour' alt='' /&gt;
    &lt;/div&gt;
&lt;/div&gt;
});
</code></pre>

<p>Thanks in advance for your help.</p>

<p>EDIT</p>

<p>I have been trawling the internet for hours now trying various different hacks to try to stop IE7 from ballsing up PNGs. I have come to the conclusion that although IE7 can handle PNGs with the minimum of fuss, it doesn't handle the change of opacity well. So i have opted for a straight image swap as it is achieves the same thing. Thanks for your help.</p>
