悬停在另一个跨度上时如何显示下一个跨度文本

Question

<asp:UpdatePanel ID="pnlParent" runat="server" UpdateMode="Conditional" ClientIDMode="Static">
    <ContentTemplate>
        <div class="hidOverflow smallPad">
            <div class="setFloatL halfWidth vertAlignT">
                <span class="profileLabel">Contact Number:</span>
            </div>
            <div class="setFloatL vertAlignT">
                <asp:Label ID="lblCliDate" ClientIDMode="Static" runat="server" Text="" CssClass="profileLabelValue"></asp:Label>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>


$(document).ready(function (e) {
    $("body").on("hover", ".profileLabel" , function () {
        alert($(this).next(".profileLabelValue").text());
    });
});

I am looking to show the text of the profileLabelValue class span when hovered over profileLabel class span . With my code, nothing is happening.

How can I accomplish this, as the method I am currently trying is not working.

Answer 1

So instead of hover I had to use mouseover .

I changed the code to this:

$(document).ready(function () {
    $("body").on("mouseover", ".profileLabel", function (e) {
        alert($(this).parent().next("div").find("span").first().text());
    });
});

In case someone else needs it in the future.

Answer 2

You should try like this:-

$(document).ready(function () {
    $("body").on("mouseover", ".profileLabel", function (e) {
        alert($(this).parent().next("div").find("span").first().text());
    });
});

Answer 3

Use 'mouseover' instead of 'hover'.

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Source