Question

我正在执行一个非常简单的onmouseover fade，就像这样：

$(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")上运行。

jquery - 淡入淡出不适用于Chrome 16

1 个答案: