0

我正在执行一个非常简单的 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。

有什么想法吗？

4

1 回答 1

0

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

a.advert {
  display: block;
}

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

.wrapper:hover {
  cursor: pointer;
}

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

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

于 2011-10-10T12:28:49.893 回答