JQuery将扩展图像前置

您好我正在使用JQuery展开图像功能，并且我需要将展开的图像放在与其他人重叠的前方，但不知何故，我找不到方法来执行此操作，我试图将其放置在z指数上的多个位置，但没有任何帮助，请您咨询，谢谢！：JQuery将扩展图像前置

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

我DataList控件：

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

来源

2011-06-30 k80sg

你可以用这个

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

来源

2011-06-30 17:18:25 Goldie

两件事：

z-index将始终是'自动'，除非使用相对位置，绝对值或固定值。因此，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'开始，必须向上遍历，直到您位于表示其父项“ItemTemplate”的div元素为止。将需要修改我的jQuery：

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

到：

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

，在那里你在一个.closest('div)的，你需要通过DOM向上遍历每个div元素添加。合理？

来源

2011-06-30 17:59:54 BumbleB2na

JQuery将扩展图像前置

回答

相关问题