Question

我正在试图弄清楚为什么它在FireFox，Chrome中有效，但在IE中没有，而在Safari和Opera中则不正确（你可以在http://41six.com/about/查看它）

HTML：

<div id="menu"> 
    <ul> 
        <li> 
            <a href="/" class="home" title="Home" alt="fortyonesix">&nbsp;</a>   
            <div id='home-hover'>Home Page</div> 
        </li>
    </ul>
</div>

CSS：

#menu .home {
    display:block;
    height:24px;
    width:24px;
    background-image: url('../images/Home.png');
}

#home-hover {
    position:fixed;
    padding: 3px 0 3px 10px;
    left:40px;
    top:125px;
    width: 100px;
    height: 20px;
    background-color:#000;
    color: #fff;
    z-index:9999;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-bottom-radius: 5px;
    display:none;
}

JQuery的：

$('.home').hover(function() {
    $('#home-hover').animate({width:'toggle'},200);
},
function() {
    $('#home-hover').animate({width:'toggle'},200);
});

这绝对不是很漂亮，但我不确定为什么它不能用于Safari，Opera和IE

Answer 1

首先，建议：将“溢出”设置为“隐藏” - 它将摆脱一个小动画神器。

有趣的是，悬停效应发生在ie6 .... =）

好的，我发现了一些有用的东西：尝试设置

#menu {
   width:400px;
}

是的，它不漂亮，但它会告诉你一些东西;将鼠标悬停在“主页”上，您会在菜单的最底部看到“主页”的动画效果。看起来你有两个问题：溢出和定位。

要突出显示溢出问题，请设置

#menu {
    width:60px;
}

和

#home-hover {
    background-color:red;
}

（同样，这些值仅用于调试目的）。

将鼠标悬停在“主页”图标上，您将看到问题。

您可以通过删除#menu中的“position：fixed”并将所有#home-hover等的“z-index”更改为1000来解决此问题（我通过反复试验找到）。

这对你来说是个公平的开始。

但坦率地说，重新开始可能是值得的 - 看起来这个css中的一部分可以从一些严重的重构中受益。

一切顺利，

贾里德

Answer 2

当你鼠标悬停在左侧菜单上时，你显示的是一个覆盖链接的DIV，因此你不再在链接上，你已经超过了它上面的DIV，所以动画会转到联合国 - 立即停止状态。

jQuery Animate浏览器之间的不一致

2 个答案: