当鼠标悬停在图像上时显示带有链接按钮的 div答案

【问题标题】：when mouseover on image show div with linkbutton当鼠标悬停在图像上时显示带有链接按钮的 div
【发布时间】：2013-02-15 13:05:20
【问题描述】：

我正在使用下面的代码在 div 中显示链接按钮，当它单击时应该转到该链接。这对我不起作用。我尝试了下面的代码。只需检查并告诉我哪里错了。当用户回答任何问题并且我们将鼠标悬停在我们获得他/她的个人资料的那个用户图像上并且还有一个链接可以查看他们的个人资料时，它在这个网站上运行良好。正是这个概念与我正在搜索的概念相同，所以请帮忙。

        <!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>

【问题讨论】：

标签： c# javascript jquery html css

【解决方案1】：

地址错误你应该把请求的协议放到地址而不是简单的地址。因此，您需要像这样更改标签中的 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

通用协议

端口号 - 服务
80 - HTTP
21 - FTP 110 - POP3
25 - SMTP
23 - 远程登录

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

<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开头

【讨论】：