鼠标悬停在图像上时显示div与linkbutton

时间:2013-02-15 13:05:21

标签: c# javascript jquery html css

我使用下面的代码显示div中的linkbutton,当它点击它时应该转到该链接。 这对我来说无法正常工作。我尝试了以下代码。只需检查并告诉我哪里错了。 当用户回答任何问题并且我们将鼠标悬停在该用户图像上时,我们得到了他/她的个人资料,并且还有一个链接可以查看他们的个人资料。正是这个概念和我正在寻找的一样,所以请帮助。

        <!DOCTYPE html>
          <html>
          <head>

              <title></title>
                  <style>
                    div.out { width:40%; height:120px; margin:0 15px;
                     background-color:#D6EDFC; float:left; }
                      div.in { width:60%; height:60%;
                 background-color:#FFCC00; margin:10px auto; }
                 p { line-height:1em; margin:0; padding:0; }

                    </style>
                             <script src="http://code.jquery.com/jquery-latest.js"></script>
                      </head>
               <body>
                 <form id="form1" runat="server">

                 <img src="Images/orderedList2.png" id="actionImage" />
                  <div class="out overout">
                  <span>move your mouse</span>
                  <div class="in">
               <p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
          <a href="www.google.com" id="A1" class="target">www.google.com</a>
                     </div>
                    </div>
               <div class="out enterleave">
                  <span>move your mouse</span>
                      <div class="in" >
                               <p>The function bigImg() is triggered when the user moves the                                                      mouse pointer over the image.</p>
                     <a href="www.google.com" id="url" class="target">www.google.com</a>
                    </div>
                    </div>
           <script type="text/javascript">

              $('#actionImage').mouseover(function (e) {
              $("div.enterleave").show();
              $('#actionImage').mouseout(function () {
              $("div.enterleave").hide();

            });
           });

          $("div.enterleave").mouseenter(function () {
          $(this).show();
          }).mouseleave(function () {
             $(this).hide();
             });

           </script>


                </form>
                </body>
                   </html>

3 个答案:

答案 0 :(得分:0)

我不确定你要使用的JS,但代码中的一个基本错误是你的链接需要“http://”

<a href="http://www.google.com">Google</a>

答案 1 :(得分:0)

<a href="www.google.com" id="url" class="target">www.google.com</a>

替换为

<a href="http://www.google.com" id="url" class="target">www.google.com</a>

因为外部链接应该以http或Https

开头

答案 2 :(得分:0)

地址错误您应该将请求的协议放在地址而不仅仅是地址。因此,您需要更改标记中的href参数,如下所示:

<a href="http://www.google.com" id="A1" class="target">www.google.com</a>
<a href="http://www.google.com" id="url" class="target">www.google.com</a>

要了解有关协议的更多信息,请参阅以下内容

http://computernetworkingnotes.com/network-technologies/protocol-tcp-ip-udp-ftp-tftp-smtp.html

Commons Protocols

港口号码 - 服务
80 - HTTP
21 - FTP 110 - POP3
25 - SMTP
23 - Telnet