Show Hide Div on Movehover to an image in side an anchor?

Question

I have a working code to show hide div, here it is:

HTML:

<table>
<asp:Repeater ID="rptProfilePicLeftBar" runat="server">
    <ItemTemplate>
        <tr>
            <td>
                <a id="aUserPosts" href='<%#Eval("LinkToUsersPosts") %>' cssclass="clsimgProfilePicLeftSide"
                    target="_blank" runat="server">
                    <asp:Image ID="imgProfilePicLeftSide" CssClass="clsimgProfilePicLeftSide" ImageUrl='<%#Eval("ProfilePicURL") %>'
                        runat="server" />
                </a>
                <div class="divUserDetail" style="display: none;">
                    Name:
                    <%#Eval("Name") %><br />
                    Display Name:
                    <%#Eval("DisplayName")%><br />
                    Nick Name:
                    <%#Eval("NickName")%><br />
                    Sign:
                    <%#Eval("Sign")%><br />
                    Why I Run::
                    <%#Eval("WhyIRunCayman")%><br />
                </div>
            </td>
            <%-- <td>
                    <asp:Literal ID="ltrlName" Text='<%#Eval("Name") %>' runat="server"></asp:Literal>
                </td>
                <td>
                    <asp:Literal ID="ltrlDisplayName" Text='<%#Eval("DisplayName") %>' runat="server"></asp:Literal>
                </td>--%>
        </tr>
    </ItemTemplate>
</asp:Repeater>

My jquery code is:

<script type="text/javascript">
$(function () {
    $(".clsimgProfilePicLeftSide").hover(function () {
        var divToShow = $(this).siblings("div.divUserDetail");
        divToShow.css({
            display: "block",
            position: "absolute"
        });
    },function () {
          $("div.divUserDetail").hide();
   });
});

Actually it stops working after i used anchor tag surround the Image tag ie

<a id="aUserPosts" href='<%#Eval("LinkToUsersPosts") %>' cssclass="clsimgProfilePicLeftSide"
                    target="_blank" runat="server">
                    <asp:Image ID="imgProfilePicLeftSide" CssClass="clsimgProfilePicLeftSide" ImageUrl='<%#Eval("ProfilePicURL") %>'
                        runat="server" />
                </a>

If we just remove the anchor tag it works fine.. but now i want anchor too, please help me how can i make it working again..Thanks in advance.

Answer 1

Update your jquery like this.

 $(function () {
 $("a.clsimgProfilePicLeftSide").hover(function () {
    var divToShow = $(this).siblings("div.divUserDetail");
    divToShow.css({
        display: "block",
        position: "absolute"
    });
 },function () {
      $("div.divUserDetail").hide();
 });
 });