javascript - JQuery 在悬停输入时显示标签

Question

我试图让标签在他们悬停在输入字段上时显示。这是我的表单的样子。

这是我的 HTML:

            <div class="loginbox">
            <div class="box">
                <input runat="server" id="txt_clientrefmock2" class="logintextbox" placeholder="Client Ref" type="text" />
                <input runat="server" id="txt_postcodemock2" class="logintextbox" placeholder="Postcode" type="text" />
                <asp:TextBox runat="server" ID="txt_dateofbirth" CssClass="logintextbox" />
                <AjaxControlToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="txt_dateofbirth" Mask="99/99/9999" />
            </div>

        </div>
        <div class="button">
            <div class="btnlogin">
                <asp:Button ID="btnLogin" runat="server" Text="Log in" CssClass="loginButton" OnClick="btnLogin_Click" />
            </div>
            <div class="messages">
                <asp:Label runat="server" Text="Please contact 88888 888 888 if you cannot find your client reference" ID="message" Visible="false" />
            </div>
        </div>

我想要发生的是，当他们将鼠标悬停在“客户引用”框上时，我的标签就会变得可见。

我试过这样的代码(这行不通):

    <script>
        $(".txt_clientrefmock2").hover(
          function () {
              $("#message").show();
          },
          function () {
              $("#message").hide();
          }
        );
    </script>

编辑

我发现了导致另一个类似问题的问题。

当我从标签中取出“Visable = False”并运行代码时，它工作正常。

那么我还能如何隐藏 Page_Load 上的标签呢？

Answer 1

因为您正在使用 ASP.NET 和 txt_clientrefmock2是您需要使用的服务器控件 Control.ClientID 并且您正在使用 ID，因此您需要使用 #用于 ID 选择器。

<%= txt_clientrefmock2.ClientID %>将获取由 ASP.NET 生成的 HTML 标记的控件 ID。

使用

$("#<%= txt_clientrefmock2.ClientID %>").hover(function() {
    $(".message").show(); //Here Message is a class so you need to use .
}, function() {
    $(".message").hide();
});