在悬停jquery上显示GIF图像，没有任何反应答案

【问题标题】：Display GIF image on hover jquery, nothing happens在悬停jquery上显示GIF图像，没有任何反应
【发布时间】：2013-03-11 15:36:35
【问题描述】：

好的，我有一个居中的视频，它显示了一个睁眼和闭眼的循环。在这之后我有一个隐藏的 div，其中包含一个闭眼的 GIF。我想要归档的是，当用户悬停按钮时，GIF 会显示在视频上方。这是我目前所拥有的：

jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    <script language="text/javascript">
        var image = new Image();
        image.src = "eye.gif";
        $("#apDiv1").hover(function () {

          $("#gif").show().attr('src', image.src);
        }, function(){
            $("#gif").hide();
        });
      </script>

HTML 按钮：

<div id="apDiv1">
                                <li>
                                    <a href="../designcompany/index.html">
                                    <span class="ca-icon">Mode</span>
                                    </a>                    
                                </li>
                            </div>

HTML 电影和 GIF：

<div id="w">


    <img id="gif" src="eye.gif"/>
                                    <div id="videoplayer">
                                        <center>
                                            <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400" >
                                            <source src="./media/eye.mp4" type="video/mp4">
                                            </video>
                                        </center>   
                                    </div>
                            </div>

CSS：

#gif{
 display:none;   
}

【问题讨论】：

标签： jquery html5-video gif

【解决方案1】：

如果你想要一个元素在另一个元素的“顶部”，你必须将它的 z-index 设置为更高的数字。

【讨论】：

z-index 不是这里的问题......这是关于将图像（CSS）居中放在视频顶部，试试他的代码，你会看到......

【解决方案2】：

我想要归档的是，当用户悬停按钮时，GIF 会显示在视频上方

 $("#apDiv1").hover(
          function () {
           $("#gif").show().attr('src', image.src);
           $('#gif').css('z-index','999999');
           $('#videoplayer').css('z-index','999');
          },

          function(){
           $("#gif").hide();
        });

【讨论】：

【解决方案3】：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    <script language="text/javascript">
        //your code is here
    </script>
</script>

这样不行，你需要关闭第一个脚本标签：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
       //your code now goes here
    });
</script>

我认为语言属性在 1990 年代很流行（大约在同一时间中心标签消失）？

然后你按正确的顺序放置元素：

<div id="apDiv1">
    <div id="videoplayer" style="margin: 0 auto; position: relative;">
        <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400">
            <source src="./media/eye.mp4" type="video/mp4" />
        </video>
        <img id="gif" src="eye.gif" style="display: none; position: absolute; top:0; left:0;"/>
    </div>
</div>

并隐藏和显示图像：

$("#apDiv1").on('mouseenter mouseleave', function(e) {
    $("#gif").toggle(e.type==='mouseenter')
});

【讨论】：