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