Question

在Chrome中查看时，我发现我的jQuery鼠标悬停字幕功能存在一个非常奇怪的问题 - 但仅限于Mac上！我的朋友使用Windows 7，他的所有浏览器都能正确，流畅地显示js。不过我已经在众多Mac上测试过，Chrome for Mac似乎无法处理它！

FF和Safari在两种操作系统中都能很好地工作（在Safari中稍微平滑一点）。

首先，这是我正在建立的网站here。该功能是投资组合部分中每个项目的鼠标悬停。

JS：

$(document).ready(function() {
$('.item .caption').hide();
//On mouse over
$('.item').hover(function() {
    //Display the caption
    $(this).find('div.caption').stop(true, true).fadeIn(300);
},
//When mouse leave
function() {
    //Hide the caption
    $(this).find('div.caption').stop(true, true).delay(700).fadeOut(300);
});});

CSS：

.item {
    float:left;
    height: 215px;
    margin: 7px;
    width: 225px;
    position: relative;
    background: #cacbce;    
}

.item .caption {
    background: url(images/hoverbg.png) repeat;
    box-shadow:inset 0px 0px 250px #000;
    -moz-box-shadow:inset 0px 0px 250px #000;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    position: absolute;
    top: 0;
}

相当标准的功能，我相信你会同意的。有没有人知道出了什么问题？

我正在使用Chrome 10.0.648.133（截至2011年3月15日为止）。我开始认为这是浏览器的问题！

Answer 1

这已经解决了。

Chrome在你正在应用JS的元素中使用box-shadow css有困难。一旦我删除它，它完美地工作。我会在Chrome开发论坛上提出这个问题。

FadeIn / FadeOut Chrome中的奇怪故障 - 仅限Macs！

1 个答案: