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").