1

显示它的外观的打印屏幕：http: //i50.tinypic.com/24nl15w.png

我想要归档的是，当用户将鼠标悬停在其中一个按钮上时，一个包含眨眼 GIF 的隐藏 div 将出现在视频上方。问题是什么都没有发生，我如何选择多个按钮来显示同一个 GIF？提前致谢 ：）

<!doctype html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title></title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="HandheldFriendly" content="true">
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
      <link rel="stylesheet" type="text/css" href="./css/global.css">
      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji">
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $("#apDiv1").hover(
              function () {
               $("#gif").show().attr('src', image.src);
               $('#gif').css('z-index','999999');
               $('#videoplayer').css('z-index','999');
              },

              function(){
               $("#gif").hide();
            });
      </script>

    </head>

    <body>
        <div id="center">
            <ul id="ca-menu">
                                <div id="apDiv1">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                                 <div id="apDiv2">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                                 <div id="apDiv3">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                                 <div id="apDiv4">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                                 <div id="apDiv5">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                                 <div id="apDiv6">
                                    <li>
                                        <a href="../designcompany/index.html">
                                        <span class="ca-icon">Mode</span>
                                        </a>                    
                                    </li>
                                </div>
                            </ul>

                            <div id="w">
                                <img id="gif" src="eye.gif" style="display: none; position: absolute; top:0; left:0;"/>
                                    <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>

    </body>
    </html>
4

2 回答 2

1

你缺少一个

$(document).ready(function(){
    /*...your stuff goes here...*/
});

它应该包装你目前拥有的 jQuery。这样 jQuery 会等到你的 DOM 被浏览器完全读取并被ready操作。

http://api.jquery.com/ready/

或者您可以使用有用的速记来document.ready喜欢：

$(function(){ // Now DocumentObjectModel is ready 
    /* your stuff in here */
});
于 2013-03-22T00:33:44.803 回答
0

我刚刚测试了你的代码，它运行了 jsFiddle 我会检查控制台，看看是否有任何链接损坏

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

          function(){
           $("#gif").hide();
        });
});
于 2013-03-22T00:39:06.913 回答