JQuery将展开的图像放在前面

本文关键字：图像 在前面 JQuery | 更新日期: 2023-09-27 18:00:42

嗨，我正在使用JQuery展开图像函数，我需要将展开的图像放在前面，与其他图像重叠，但不知怎么的，我找不到方法，我试图将z索引放置在多个位置，但没有帮助，请提供建议，谢谢！：

<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>

我的数据列表：

<div style="width: 414px; height: 114px;">
<div class="MostPopularHead">
<asp:Label ID="LabelTitle" runat="server" Text=" Customers who bought this also 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>

JQuery将展开的图像放在前面

你能用这个吗

.css('z-index', parseInt( new Date().getTime()/1000 ));

两件事：

z索引将始终为"auto"，除非使用相对、绝对或固定的位置。因此，position:inherit将不起作用。

更新你的css：

.growImage { position:relative; width:80%;left:15px;}   
.growDiv { 
    position:relative; left: 60px; top: 60px;width:130px;height:130px; 
}

现在，我制作了一个JSFiddle来表明我可以使用它，但我必须稍微修改HTML结构：http://jsfiddle.net/Dpzur/4/

您需要查看.aspx页面创建的源代码，以查看从任何类为"growDiv"的div开始，必须向上遍历多少个div，直到到达代表其父级"ItemTemplate"的div元素。。所以你需要修改我的jQuery:

$(this).closest('.growDiv').first().css('z-index', 2);

至：

$(this).closest('.growDiv').first().closest('div').closest('div').css('z-index', 2);

，其中为需要在DOM中向上遍历的每个div元素添加一个.closest('div)。有道理吗？

相关文章：