显示隐藏Div移动到锚点内的图像?

时间:2014-06-26 12:37:39

标签: javascript jquery html css asp.net

我有一个显示隐藏div的工作代码,这里是:

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>

我的jquery代码是:

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

实际上,在我使用锚标签围绕图片标签,即

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

如果我们只删除锚标签,它可以正常工作.. 但是现在我也想要锚,请帮助我,我怎么能让它再次运作......谢谢你。

1 个答案:

答案 0 :(得分:0)

像这样更新你的jquery。

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