Question

您好我正在使用JQuery扩展图像功能，我需要扩展图像在前面重叠其他人但不知何故我找不到办法做到这一点，我试图将z-index置于多个地点，但没有帮助，请提出建议，谢谢！：

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

Answer 1

你可以用这个吗？

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

Answer 2

两件事：

除非使用相对位置，绝对位置或固定位置，否则

z-index将始终为“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页面创建的源，以查看从具有类的任何div开始有多少div：'growDiv'，您必须向上遍历，直到您处于代表其父级的div元素“ItemTemplate”..所以你需要修改我的jQuery：

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

为：

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

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

JQuery将扩展的图像带到了前面

2 个答案: