Question

我的小提琴：

我的网站上有一个[隐藏]图像，它应该在悬停时发生2个事件：播放mp3，图像淡入。它位于页面底部的中间位置。认为CSS定位导致问题，但当我删除所有CSS定位时，我仍然无法将图像转换为fadeIn。尽管如此，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(); 
});
});

Answer 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 。

Answer 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;
    }

jQuery fadeIn on on hover not working：div with jpg inside div

2 个答案: