jquery - fadeTo not working in Chrome 16

I'm performing a very simple onmouseover fadeTo like this:

$(document).ready(function() {    
$('img#logo-link, a.advert').hover(function() {    $(this).fadeTo('fast',0.75)    } , function(){    $(this).fadeTo('fast',1)    });
});

...which works fine in FF7/8, but I can't get the element a.advert to fade in Chrome (other fades work fine). The HTML is this:

<a class="advert lime" href="/my-url">
    <div class="wrapper">
        <img src="file.jpg" width="225" height="280" alt="Alt text" />
        <div class="description">
            <div class="description_content">
                <h3>Advert title</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</a>    

I can see the opacity changing in Chrome's inspector, but it doesn'开发者_JAVA技巧t look any different within the document. Other such fades work fine (including ones with images).

I'm using jQuery 1.6.2.

Any thoughts?

My first thought is that this is caused by having block-level elements (divs, images, etc.) inside of an inline element (a). Try adding:

a.advert {
  display: block;
}

However, a better way to accomplish this would be to get rid of the a tag and mimic its behavior with jQuery and CSS:

.wrapper:hover {
  cursor: pointer;
}

$(".wrapper").click(function() {
  window.location = '/my-url';
};

And then the hover effect would most certainly work, using the same code but running it on $(".wrapper") instead of $("a.advert").