c# - JQuery bring expanded image to front -
hi working jquery expand image function , needed expanded image on front overlapping others somehow couldn't find way it, have tried place z-index on multiple locations no help, please kindly advice, thanks!:
<style type="text/css"> .growimage {position:inherit ;width:80%;left:15px;top:15px; z-index:1;} .growdiv { left: 60px; top: 60px;width:130px;height:130px;position:inherit ; z-index:-1; } </style> <script type="text/javascript"> $(document).ready(function () { $('.growimage').mouseover(function () { $(this).stop().animate({ "width": "100%", "right": "10px", "top": "20px" }, 200, 'swing'); }).mouseout(function () { $(this).stop().animate({ "width": "80%", "right": "15px", "top": "15px" }, 400, 'swing'); }); ; }); </script>
my datalist:
<div style="width: 414px; height: 114px;"> <div class="mostpopularhead"> <asp:label id="labeltitle" runat="server" text=" customers bought bought:"></asp:label></div> <div id="div1" style="padding: 10px; background-color:#edecb3; height: 322px; width: 372px;" runat="server"> <asp:datalist id="dataitemslist" runat="server" repeatcolumns ="3" width="16px" height="108px" > <headertemplate></headertemplate> <itemtemplate> <a class='mostpopularitemtext' href='productdetails.aspx?productid=<%# eval("productid") %>&&categoryid=<%# eval("categoryid") %>' style="padding-right: 3px; padding-left: 3px"> <div class="growdiv"> <img class="growimage" alt="image" src='styles/catalogimages/images/thumbs/<%# eval("productimage") %>'/> </div></a> </itemtemplate> <footertemplate></footertemplate> </asp:datalist> </div> </div>
can make this
.css('z-index', parseint( new date().gettime()/1000 ));
Comments
Post a Comment