0

好的，我有一个居中的视频，它显示了一个睁眼和闭眼的循环。在这之后我有一个隐藏的 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;   
}
4

3 回答 3

0

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

于 2013-03-21T22:15:17.087 回答
0

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

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

          function(){
           $("#gif").hide();
        });
于 2013-03-21T22:18:30.680 回答
0 
<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')
});
于 2013-03-21T22:19:29.240 回答