jquery - fadeTo 在 Chrome 16 中不起作用

Question

我正在执行一个非常简单的 onmouseover fadeTo，如下所示：

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

...在 FF7/8 中工作正常，但我无法让元素 a.advert 在 Chrome 中淡入淡出（其他淡入淡出工作正常）。 HTML 是这样的：

<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>    

我可以在 Chrome 的检查器中看到不透明度发生了变化，但在文档中看起来并没有什么不同。其他此类淡入淡出效果很好（包括带有图像的淡入淡出）。

我正在使用 jQuery 1.6.2。

有什么想法吗？

Answer 1

我的第一个想法是，这是由于内联元素 (a) 中有块级元素（div、图像等）造成的。尝试添加：

a.advert {
  display: block;
}

然而，实现这一点的更好方法是去掉a 标记并使用jQuery 和CSS 模仿它的行为：

.wrapper:hover {
  cursor: pointer;
}

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

然后悬停效果肯定会起作用，使用相同的代码但在$(".wrapper")而不是$("a.advert")上运行。