Question

好的，我有一个以视频为中心的视频，显示了一个眼睛开启和关闭的循环。后面我有一个隐藏的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;   
}

Answer 1

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

Answer 2

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

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

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

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

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

3 个答案: