使用jQuery處理圖像z-index

我有一排由瀏覽器調整大小爲100x100px的160x160px浮動圖像。使用jQuery處理圖像z-index

在懸停時，會操縱通常大小和邊距的圖像以保持它們在同一位置。

接下來我想實現的是將放大的圖像移到前面，然後在懸停事件後再回來。我試圖通過添加和刪除一個類來實現這其中Z-指數爲100

的HTML是：

<div id="content_top"> 
     <img class="thumbnail" src="images/thumbs/thumb1.jpg" width="100" height="100" border="0" alt=""/> 
     <img class="thumbnail" src="images/thumbs/thumb2.jpg" width="100" height="100" border="0" alt=""/> 
     <img class="thumbnail" src="images/thumbs/thumb3.jpg" width="100" height="100" border="0" alt=""/> 
     <img class="thumbnail" src="images/thumbs/thumb4.jpg" width="100" height="100" border="0" alt=""/> 
     <img class="thumbnail" src="images/thumbs/thumb5.jpg" width="100" height="100" border="0" alt=""/> 
    </div>

隨着CSS：

#content_top { 
     height: 210px; 
} 

#content_top img{ 
     float:left; 
     padding: 0 0 0 10px; 
    } 

    .ontop { 
     z-index: 100; 
    }

jQuery的我」 m使用的是：

$('#content_top img').hover(function(){ 
    $(this).filter(':not(:animated)').animate({ 
     'width' : '160px', 
     'height' : '160px', 
     'marginLeft' : '-30px', 
     'marginRight' : '-30px', 
     'marginBottom' : '-30px' 
     }, 'fast', 'linear' 
    ).addClass('ontop'); 
}, function(){ 
    $(this).animate({ 
     'width' : '100px', 
     'height' : '100px', 
     'marginLeft' : '0px', 
     'marginRight' : '0px', 
     'marginBottom' : '0px' 
    }, 'fast', 'linear' 
    ).removeClass('ontop'); 
});

所有的工作都很好，除了z-index部分。我已經測試過該課程正在被添加，而且是。嘗試了各種定位圖像的方法，甚至將它們封裝在容器div中，並更改這些圖像的z-index。

我錯過了什麼？

謝謝。

來源

2011-01-29 andylamb

您是否嘗試將絕對位置（在CSS中）？ – 2011-01-29 14:52:12

我發現`z-index`變化在所有情況下都不會自動重繪。使用jQuery UI的「可拖動」系統時，這是一個常見問題。 – Orbling 2011-01-29 14:59:30

z-index屬性僅適用於定位元素。

嘗試......

#content_top img{ 
    position:relative; 
    z-index:1; 
    float:left; 
    padding: 0 0 0 10px; 
} 

#content_top img.ontop { 
    z-index: 2; 
}

這裏是一個有效的解決方案：http://jsfiddle.net/Wgy3E/1/

來源

2011-01-29 14:57:35 gearsdigital

確實在img工作中定義了較低的z-index？其他嘗試使用jquery .setStyle（{z-index：''}）;到一個較低的值，而不是刪除類。

來源

2011-01-29 14:53:16 ferdyh

的z-index只適用於定位元素（位置：絕對的，位置：相對或立場：固定）。 [w3schools]

來源

2011-01-29 14:59:34 jcubic

使用jQuery處理圖像z-index

回答

相關問題