javascript - mouseover 事件无法运行

Question

我在我的asp页面上做一个鼠标悬停功能。这是我的代码：

<!DOCTYPE html>
<html>
<head runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
    <script>
        $(document).ready(function(){
            $(".Menu1").mouseover(
            function () { $("td_1").show(); },
            function () { $("td_1").hide(); }
          );
            $(".Menu2").mouseover(
          function () { $("td_2").show(); },
          function () { $("td_2").hide(); }
          );
            $(".Menu3").mouseover(
            function () { $("td_3").show(); },
            function () { $("td_3").hide(); }
          );
            $(".Menu4").mouseover(
          function () { $("td_4").show(); },
          function () { $("td_4").hide(); }
          );
            $(".Menu5").mouseover(
          function () { $("td_5").show(); },
          function () { $("td_5").hide(); }
          );
            $(".Menu6").mouseover(
          function () { $("td_6").show(); },
          function () { $("td_6").hide(); }
          );
            $(".Menu7").mouseover(
          function () { $("td_7").show(); },
          function () { $("td_7").hide(); }
          );
            $(".Menu8").mouseover(
          function () { $("td_8").show(); },
          function () { $("td_8").hide(); }
          );
        })
</script>
</head>
<body>
    <form runat="server">
<table width="963" height="70" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:99px">
              <asp:Menu ID="Menu1" BackColor="Purple" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">                  
                  <Items>
                            <asp:MenuItem NavigateUrl="index.aspx" Text="Hello1">                              
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>
            </td>
            <td style="width:112px">
              <asp:Menu ID="Menu2" BackColor="Yellow"  Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">
                  <Items>
                            <asp:MenuItem NavigateUrl="open-live-account.aspx" Text="Hello2">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>
            </td>
             <td style="width:117px">
              <asp:Menu ID="Menu3" BackColor="Red" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">
                  <Items>
                            <asp:MenuItem NavigateUrl="education-center.aspx" Text="Hello3">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>

            </td>
            <td style="width:121px">
              <asp:Menu ID="Menu4" BackColor="Black" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">
                  <Items>
                            <asp:MenuItem NavigateUrl="investment-news.aspx" Text="Hello4">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>

            </td>
              <td>

            <asp:Menu ID="Menu5" BackColor="Blue" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">

                  <Items>
                            <asp:MenuItem NavigateUrl="affiliate-program.aspx" Text="Hello5">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>

            </td>
            <td>
             <asp:Menu ID="Menu6"  BackColor="Green" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">

                  <Items>
                            <asp:MenuItem NavigateUrl="support.aspx" Text="Hello6">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>

            </td>
             <td style="width:118px">
             <asp:Menu ID="Menu7" BackColor="Pink" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">

                  <Items>
                            <asp:MenuItem NavigateUrl="about-us.aspx" Text="Hello7">
                            </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>
            </td>
             <td style="width:140px">
             <asp:Menu ID="Menu8"  BackColor="Orange" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">
              <Items>
                            <asp:MenuItem NavigateUrl="contact-us.aspx" Text="Hello8">
                 </asp:MenuItem>                          
                  </Items>
                  </asp:Menu>
            </td>
        </tr>
    </table>
        <table>
    <tr>
      <td><table width="963" height="15" border="0" cellspacing="0" cellpadding="0" style="display:none">
        <tr>
          <td id="td_1" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101">
          <a href="open-live-account.aspx" class="style101">Open Live Account</a>&nbsp;&nbsp; | &nbsp;&nbsp;
          <a href="/File/nzf4setup.exe" class="style101">Download</a>&nbsp;&nbsp; | &nbsp;&nbsp;
          <a href="/deposit.aspx" class="style101">Deposit</a>&nbsp;&nbsp; | &nbsp;&nbsp;
          <a href="/withdraw.aspx" class="style101">Withdrawal</a>
              </div>
          </td>
        </tr>
          <tr>
            <td id="td_2" colspan="8" bgcolor="#CF0D0B" height="25">
                                <div align="center" class="style101">
                                    <a href="open-live-account.aspx" class="style101">Open Live Account</a>&nbsp;&nbsp;
                                    | &nbsp;&nbsp;<a href="deposit.html" class="style101">Deposit</a><a href="nzf-seminar.html"
                                        class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="withdraw.html" class="style101">Withdraw</a><a
                                            href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="trading-platform.html"
                                                class="style101">Trading Platform</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp;
                                    | &nbsp;&nbsp;<a href="market-hours.html" class="style101">Market Hours</a><a href="nzf-seminar.html"
                                        class="style101"></a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp;
                                    | &nbsp;&nbsp;<a href="trading-services.html" class="style101">Trading Services</a><a
                                        href="nzf-seminar.html" class="style101"></a></div>
            </td>
              </tr>
          <tr>
            <td id="td_3" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="education-center.html" class="style101">Education Center</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="risk-assessment.html" class="style101">Risk Assessment</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="risk-warning.html" class="style101">Risk Warning</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="money-management-responsible-trading.html" class="style101">Money Management &amp; Responsiblity Trading</a><a href="nzf-seminar.html" class="style101"></a></div></td>
          </tr>
          <tr>
            <td id="td_4" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="investment-news.html" class="style101">Investment news</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="economic-calendar.html" class="style101">Economic Calendar</a><a href="nzf-seminar.html" class="style101"></a></div></td>
              </tr>
          <tr>
            <td id="td_5" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="affiliate-program.html" class="style101">Affiliate Program</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="white-label.html" class="style101">White Label</a><a href="nzf-seminar.html" class="style101"></a></div></td>
          </tr>
          <tr>
            <td id="td_6" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="contact-us.aspx" class="style101">Contact Us</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="nzf-faq.html" class="style101">FAQ</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="site-map.html" class="style101">SiteMap</a><a href="nzf-seminar.html" class="style101"></a></div></td>
              </tr>
          <tr>
            <td id="td_7" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="about-us.html" class="style101">About Us</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="nzf-vision.html" class="style101">NZF Vision</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="careers.html" class="style101">Careers</a><a href="nzf-seminar.html" class="style101"></a></div></td>
              </tr>
          <tr>
            <td id="td_8" colspan="8" bgcolor="#CF0D0B" height="25"><div align="center" class="style101"><a href="contact-us.aspx" class="style101">Contact Us</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="nzf-faq.html" class="style101">FAQ</a><a href="nzf-seminar.html" class="style101"></a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="site-map.html" class="style101">SiteMap</a><a href="nzf-seminar.html" class="style101"></a></div></td>
              </tr>
          </table>
          </tr>
    </table>
        </form>
</body>
</html>

不知何故，当我尝试将鼠标悬停时，它没有响应我。我可以知道我做错了什么吗？我尝试使用调试工具检查任何错误，但到目前为止，工具上没有显示任何错误。

score 1 · Accepted Answer

在你的jQuery你是按类（例如$(".Menu1").mouseover）定位的，但在你的内部ASP你已经给了他们ID（Menu ID="Menu1"）。

首先，尝试将它们都更改为相同的类型（两个类或两个 ID）。
其次，您在 jQuery 中以 td_1 等为目标，但没有使用 ID/Class 选择器，因此它永远不会起作用。

例如，您的第一部分可能类似于以下内容：

jQuery：

$("#Menu1").hover(
  function () { $("#td_1").show(); },
  function () { $("#td_1").hide(); }
);

ASP：

<td style="width:99px">
 <asp:Menu ID="Menu1" BackColor="Purple" Orientation="Horizontal"  ForeColor="White" runat="server" CssClass="Menu" StaticEnableDefaultPopOutImage="false">                  
  <Items>
   <asp:MenuItem NavigateUrl="index.aspx" Text="Hello1">                              
   </asp:MenuItem>                          
  </Items>
 </asp:Menu>
</td>

score 0 · Accepted Answer

你需要一个 id 选择器#而不是 class.

  $("#Menu1").mouseover(
  //-^-- here

我认为你需要的是hover()因为悬停必须回调mouseenter和mouseleave的函数

$("#Menu1").hover(
        function () { $("#td_1").show(); },
                   //----^^--here
        function () { $("#td_1").hide(); }
                   //----^^--here
      );

注意：您需要在td_1类或 id 中使用选择器。我找不到任何具有这些名称的元素

score 0 · Accepted Answer

您正在使用 Class 而不是 ID

并且您的 Jquery 应该如下所示：

  $("#Menu1").mouseenter(function() {
     $("td_1").show();
  }).mouseleave(function() {
     $("td_1").hide();
  });

score 0 · Accepted Answer

我认为您无法访问这些标签：td_1等，因为它们不存在。试试吧$('#td_1')...。并且不要忘记给物品提供IDtd_{num}

编辑

或者使用$('td:nth-child({num})') And$('#Menu1')当你给他们 ID 的 ant 而不是类

javascript - mouseover 事件无法运行

4 回答 4

Related

Reference