悬停时的jQuery淡入淡出不起作用：div内带有jpg的div答案

【问题标题】：jQuery fadeIn on hover not working: div with jpg inside div悬停时的jQuery淡入淡出不起作用：div内带有jpg的div
【发布时间】：2014-02-26 07:53:00
【问题描述】：

我的小提琴：

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

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

我也不明白为什么图像超出了 CSS 中内部 div 上设置的尺寸。为什么是这样？我的理解是内部 div 的高度/宽度应该是其父级（在本例中为“#outerMermaid”）的 100%。

感谢您的帮助！

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 css fadein fadeout

【解决方案1】：

您正在为 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。

【讨论】：

另外，将事件处理程序放在 jQuery(document).ready 处理程序中
在 Fiddle 中，它不是，所以想突出显示它。
JSFiddle 会自动用jQuery(document).ready 包裹左下窗口，但您可能是对的。
@matewka & myterminal - 谢谢，虽然我仍然无法让图像在小提琴或我的网站上淡入。我更新了小提琴以反映您提出的建议。
@matewka，非常感谢。你真棒。现在完美运行。

【解决方案2】：

使用js

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

css

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

    }

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

【讨论】：