我正在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> |
<a href="/File/nzf4setup.exe" class="style101">Download</a> |
<a href="/deposit.aspx" class="style101">Deposit</a> |
<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>
| <a href="deposit.html" class="style101">Deposit</a><a href="nzf-seminar.html"
class="style101"></a> | <a href="withdraw.html" class="style101">Withdraw</a><a
href="nzf-seminar.html" class="style101"></a> | <a href="trading-platform.html"
class="style101">Trading Platform</a><a href="nzf-seminar.html" class="style101"></a>
| <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>
| <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> | <a href="risk-assessment.html" class="style101">Risk Assessment</a><a href="nzf-seminar.html" class="style101"></a> | <a href="risk-warning.html" class="style101">Risk Warning</a><a href="nzf-seminar.html" class="style101"></a> | <a href="money-management-responsible-trading.html" class="style101">Money Management & 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> | <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> | <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> | <a href="nzf-faq.html" class="style101">FAQ</a><a href="nzf-seminar.html" class="style101"></a> | <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> | <a href="nzf-vision.html" class="style101">NZF Vision</a><a href="nzf-seminar.html" class="style101"></a> | <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> | <a href="nzf-faq.html" class="style101">FAQ</a><a href="nzf-seminar.html" class="style101"></a> | <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>
不知何故，当我尝试鼠标悬停时，它不响应我。我可以知道我做错了什么吗？我尝试使用调试工具检查是否有任何错误，但到目前为止，工具上没有显示错误。
答案 0 :(得分：1)
在jQuery您按班级定位（例如$(".Menu1").mouseover），但在ASP内，您已经给了他们ID（Menu ID="Menu1"）。
例如，您的第一部分可能类似于以下内容：
<强> 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>
答案 1 :(得分：0)
您需要一个ID选择器#，而不是类.
$("#Menu1").mouseover(
//-^-- here
我认为你需要的是hover()因为hover必须为mouseenter和mouseleave回调函数
$("#Menu1").hover(
function () { $("#td_1").show(); },
//----^^--here
function () { $("#td_1").hide(); }
//----^^--here
);
注意：你需要td_1中的一个seletor，无论是class还是id ..而且我找不到任何带有这些名字的元素
答案 2 :(得分：0)
您正在使用Class而不是ID
你的Jquery应该是这样的：
$("#Menu1").mouseenter(function() {
$("td_1").show();
}).mouseleave(function() {
$("td_1").hide();
});
答案 3 :(得分：0)
我认为你不能访问这些标签：td_1等，因为它们不存在。
请尝试$('#td_1')...。并且不要忘记给项目ID td_{num}
修改
或使用$('td:nth-child({num})')
而$('#Menu1')因为你给他们ID蚂蚁不是类