JQueryは画像を前面に持っていく

Question

こんにちは私は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> 

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

Answer 1

は、あなたがこの

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

で作ることができます

Answer 2

2つのもの：

相対、絶対または固定の位置を使用しない限り、Zインデックスは常に「自動」になります。したがって、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から始めて、親 "ItemTemplate"を表すdiv要素まで上をたどる必要があるdivを確認します。 jQueryを変更する必要があります：

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

へ：あなたはDOM通って上方にトラバースする必要がある各div要素のために.closest('div)に追加

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

、。理にかなっている？