Tuesday, 15 May 2012

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



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

i have working code show hide div, here 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 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 stops working after used anchor tag surround image tag i.e.

<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 remove anchor tag works fine.. want anchor too, please help me how can create working again..thanks in advance.

update jquery this.

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

javascript jquery html css asp.net

No comments:

Post a Comment