jquery - 悬停时的jQuery fadeIn不起作用:div中带有jpg的div

我的小提琴：

http://jsfiddle.net/Osceana/tEStg/18/

我的网站上有一个[隐藏]图片，该图片在悬停时会发生2个事件：播放mp3，图片逐渐淡入。它位于页面底部的中间。当时以为CSS定位会引起问题，但是当我删除所有CSS定位时，仍然无法使图像淡入。 mp3确实会悬停播放。

我也不明白为什么图片超出了CSS中内部div设置的尺寸。为什么是这样？我的理解是，内部div的高度/宽度应为其父级的100％（在这种情况下为“ #outerMermaid”）。

谢谢你的帮助！

HTML：

    <div id="outerMermaid">
    <div id="innerMermaid">
      <a href="http://www.google.com"><img src="http://files-cdn.formspring.me/photos/20120507/n4fa814fb4b286.jpg"></a>
</div>
</div>

<audio id="mermaidCall" src="http://www.dailywav.com/sites/default/files/wavs/whitewomen.wav" preload="auto">
    </audio>

CSS：

#outerMermaid
{
    height:287px;
    width::187px;
    position:fixed;
    top:70%;
    left:50%;

}

#innerMermaid
{
    position:relative;
    top:-50%;
    left:-50%;
    width:100%;
    height:100%;
    visibility:hidden;
}

js：

$( document ).ready(function() {
var call = $("#mermaidCall")[0];
$("#outerMermaid").hover(function() {
    call.play();
    $("#innerMermaid").fadeIn("slow");
}, function() {
    $("#innerMermaid").fadeOut();
});
});

最佳答案

您正在为jQuery.hover传递3个回调。应该是2：

$(function() {
    var call = $("#mermaidCall")[0];
    $("#outerMermaid").hover(function() {
        call.play();
        $("#innerMermaid").fadeIn("slow");
    }, function() {
        $("#innerMermaid").fadeOut();
    });
});

要隐藏#outerMermaid之外的内容，请在其中添加overflow:hidden：

#outerMermaid {
    overflow: hidden;
}

编辑：

此外，由于您的#outerMermaid样式存在语法错误，因此褪色无法正常工作

width::187px;

应该

width:187px;

这会导致#outerMermaid变宽为0，实际上使它无法悬停。

另外，#innerMermaid应该有

display: none;

代替

visibility: hidden;

这是您的最新提琴：FIDDLE。